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前 言 


ASPNET 是 微软 力 推 的 Web 开发 编程 技术 ， 它 是 建立 在 通用 语言 基础 上 的 程序 框架 。 
ASPNET 以 其 简单 、 快 捷 和 高 效 的 编程 模式 ， 受 到 广大 用 户 的 青睐 ， 是 当今 最 热门 的 Web 
开发 编程 技术 之 一 。 

本 书 以 制作 一 个 完整 的 企业 网 站 为 例 ， 详 细 介 绍 了 使 用 ASPNET 技术 并 基于 三 层 架 构 实 
现 一 个 动态 企业 网 站 的 常用 方法 和 技巧 。 全 书包 括 7 个 项 目 ，20 个 任务 ， 具 体内 容 组 织 如 下 : 

项 目 1 为 项 目 介 绍 和 需求 分 析 。 通 过 进行 项 目 需求 分 析 、 安 装 开发 环境 和 搭建 系统 架构 
3 个 任务 ,介绍 了 项 目 开发 前 应 进行 哪些 准备 工作 ， 以 及 如 何 对 一 个 企业 网 站 进行 需求 分 析 。 

项 目 2 介绍 了 Web 应 用 程序 的 界面 设计 。 通 过 主页 整体 布局 、 导 航 菜单 的 制作 、 中 间 
部 分 的 设计 3 个 任务 ， 曾 述 了 在 Web 应 用 开发 中 进行 页 面 设计 的 方法 和 思路 。 

项 目 3 介绍 了 Web 应 用 开发 中 动态 信息 的 绑 定 方法 。 通 过 创建 数据 库 、 数 据 表 、 存 储 
过 程 ， 使 用 C# 编 写 数据 库 读 操作 ， 以 及 使 用 控件 进行 数据 绑 定 3 个 典型 任务 ， 介 绍 了 动态 
新 闻 信 息 的 绑 定 过 程 。 

项 目 4 介绍 了 系统 登录 功能 的 实现 。 通 过 设计 登录 界面 、 编 写 读 取 数 据 库 管理 员 信 息 
的 存储 过 程 、 编 写 数据 库 连 接 的 相关 类 、 业 务 逻 辑 层 的 实现 和 进行 对 象 封装 5 个 任务 ， 介 
绍 了 基于 三 层 架构 进行 数据 访问 的 具体 实现 方法 。 

项 目 5 介绍 了 网 站 后 台 管 理 页 面 的 制作 方法 。 具 体 包括 后 台 管 理 页 面 框架 的 实现 、 左 
侧 导 航 菜 单 的 加 载 和 使 用 XML 文件 实现 节点 导航 3 个 典型 任务 。 

项 目 6 以 新 闻 管理 模块 为 例 ， 介 绍 了 如 何 设 计 信息 管理 页 面 和 实现 信息 的 增 、 删 、 查 、 
改 功能 。 

项 目 7 介绍 了 动态 网 站 开发 过 程 中 查找 功能 的 实现 。 以 主页 中 搜索 相关 信息 为 例 ， 从 
控件 的 使 用 和 后 台 代 码 两 个 方面 介绍 了 控件 的 属性 设置 及 代码 编写 方法 。 

本 书 在 结构 上 以 “项 目 引 入 一 项 目 分 解 一 相关 知识 一 任务 实施 ”为 主线 ， 以 任务 为 驱 
动 ， 以 应 用 为 需求 ， 注 重 实际 开发 能 力 的 培养 。 本 书 结构 清晰 ， 示 例 丰 富 ， 步 又 明确 ， 讲 
解 细致 ， 突 出 实用 性 和 操作 性 。 

本 书 是 广东 省 “电子 商务 ”重点 建设 专业 的 研究 成 果 教 材 ， 其 中 的 课 后 练习 答案 可 登 
录 广 东 行 政 职 业 学 院 (www.gdxzzy.cn) 网 站 的 教学 平台 ， 在 其 链接 栏 内 查阅 得 到 。 

本 书 由 广东 行政 职业 学 院 的 周 胜 安 老师 担任 主编 ， 王 圆 、 囊 伟 华 、 张 译 匀 和 黄 丽 芬 老 
师 担 任 副 主编 。 另 外 ， 广 东 佛 山 参 陆 零 网 络 科技 有 限 公 司 、 广 州 多 迪 网 络 科 技 有 限 公司 等 
网 站 开发 工程 师 也 为 本 书 的 编写 提出 了 许多 宝贵 意见 ， 在 此 一 并 表示 感谢 。 

由 于 编者 水 平 有 限 ， 书 中 难免 存在 错误 与 不 妥 之 处 ， 敬 请 广大 读者 和 同仁 多 提 宝 贵 意 
见 和 建议 (E-mail: zhou sa01@163.com)。 
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项 目 介 绍 及 需求 分 析 


项 目 5I 入 


网 站 是 指 通 向 某 类 综合 性 互联 网 信息 资源 并 提供 有 关 信 息 服务 的 应 用 系统 。 目 前 ， 网 
站 的 业务 可 谓 包罗 万 象 ， 成 为 名 副 其 实 的 网 络 界 “ 百 货 商 场 ”或 “网 络 超市 "。 随 着 信息 化 
社会 的 发 展 ， 网 站 成 为 了 绝 大 多 数 企 业 用 来 选择 宣传 自己 及 企业 业务 的 重要 工具 。 

其 实 ， 大 多 数 企业 网 站 在 功能 上 都 是 类 似 的 ， 基 本 上 都 包括 公司 介绍 、 新 闻 信 息 的 发 
布 与 浏览 、 产 品 信息 的 发 布 与 浏览 、 站 内 搜索 、 人 才 招 聘 信息 等 模块 。 

本 项 目 就 来 为 广州 一 家 中 小 皮具 公司 设计 一 个 企业 网 站 ， 其 内 容 包含 了 大 多 数 网 站 的 
常见 功能 。 


项 目 分 解 


本 项 目 中 ， 将 通过 下 列 3 个 任务 ， 学 习 和 了 解 进行 网 站 开发 时 需要 先 做 好 哪些 准备 工作 。 
任务 1 进行 项 目 需求 分 析 

任务 2 安装 开发 环境 

任务 3 搭建 系统 架构 


任务 1 进行 项 目 需 求 分 析 


在 决定 开发 一 个 网 站 项 目前 ， 首 先 要 对 项 目 进行 需求 分 析 。 和 否则 ， 就 会 出 现 投 入 了 大 
量 的 人 力 、 物 力 、 财 力 、 时 间 ， 开 发 出 的 软件 却 不 能 满足 用 户 要 求 的 局 面 。 而 如 果 重 新 进 
行 开发 ， 所 造成 的 浪费 是 不 可 想象 的 。 

需求 分 析 阶 段 的 任务 就 是 解决 “做 什么 ”的 问题 ， 即 要 全 面 地 理解 用 户 的 各 项 要 求 ， 
并 能 准确 地 表达 出 所 接受 的 用 户 需 求 。 

准确 地 说 ， 需 求 分 析 阶 段 的 工作 可 以 分 为 四 个 方面 : 问题 识别 ， 分 析 与 综合 ， 制 订 规 
格 说 明 ， 评 审 。 


【 涯 汰 芝 商社 仿 洪 岂 关 淮 广 册 席 党 相 呈 丰 】 
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问题 识别 就 
求 的 实现 条 件 以 
达到 什么 指标 )， 
全 保密 需求 ， 用 
件 成 本 消耗 与 开 
分 析 与 综合 


是 从 系统 角度 来 理解 软件 ， 确 定 对 所 开发 系统 的 综合 要 求 ， 并 提出 这 些 需 
及 需求 应 该 达到 的 标准 。 这 些 需 求 包括 : 功能 需求 (做 什么 ), 性 能 需求 (要 
环境 需求 (如 机 型 、 操 作 系 统 等 )， 可 靠 性 需求 (不 发 生 故 障 的 概率 )， 安 
户 界面 需求 ， 资 源 使 用 需求 (软件 运行 时 所 需 的 内 存 、CPU 等 )， 以 及 软 
发 进度 需求 等 ， 并 需要 预先 估计 出 以 后 系统 可 能 达到 的 目标 。 

就 是 逐步 细 化 所 有 的 软件 功能 ， 找 出 系统 各 元 素 间 的 联系 、 接 口 特性 和 设 


计 上 的 限制 ， 分 析 它 们 是 否 满足 需求 ， 剔 除 不 合理 的 部 分 ， 增 加 需要 的 部 分 ， 最 后 综合 出 


系统 的 解决 方案 
制订 规格 说 
说 明 书 。 
评审 工作 是 
才 可 进行 下 一 阶 
本 书 中 将 为 


， 给 出 待 开发 系统 的 详细 逻辑 模型 〈 即 “做 什么 ”的 模型 )。 
明 书 的 过 程 就 是 编制 文档 的 过 程 。 描 述 项 目 需求 的 文档 称 为 软件 需求 规格 


指 对 功能 的 正确 性 、 完 整 性 、 清 晰 性 以 及 其 他 需求 给 予 评价 。 评 审 通过 后 ， 
段 的 工作 ， 和 否则 需要 重新 进行 需求 分 析 。 
广州 一 家 中 小 皮具 公司 制作 企业 网 站 ， 网 站 目标 是 通过 互联 网 技术 整合 公 


司 的 产品 、 服 务 以 及 行业 相关 信息 ， 为 客户 及 合作 伙伴 提供 相应 的 新 闻 信息 、 产 品 信息 服 


务 平台 。 同 时 ， 
行业 动态 等 信 | 
以 及 社会 各 界 提 
相关 知识 

1.1.1 网 站 


网 站 开发 就 


通过 网 站 平台 建设 ， 为 来 访 者 提供 公司 动态 、 产 品 信息 、 国 家 政策 信息 、 


息 服 务 ， 并 通过 广告 增加 网 站 的 点 击 量 ， 在 网 上 开展 营销 活动 ， 为 公司 客户 


供 一 个 相互 了 解 的 信息 平台 
开发 概述 
是 指使 用 网 页 设计 软件 ， 经 过 平面 设计 、 网 页 排版 、 网 页 编程 等 步 又， 设 


计 出 多 个 网 页 ， 并 将 这 些 网 页 通过 具有 一 定 逻 辑 关 系 的 超级 链接 相互 衔接 , 构成 一 个 网 站 。 


网 页 制作 完成 以 


后 ， 还 需要 将 其 上 传 到 网 站 服务 器 上 ， 以 供 远 程 用 户 访 问 浏 览 。 


具体 来 说 ， 网 站 由 域名 、 服 务 器 空间 、 网 页 三 部 分 组 成 。 

域名 就 是 用 户 访问 网 站 时 在 浏览 器 地 址 栏 中 输入 的 网 址 。 

网 页 一 般 是 通过 Dreamweaver 等 软件 编辑 出 来 的 多 个 文档 , 使 用 HTML 语言 来 描述 文 
本 、 图 片 、 动 画 等 内 容 ， 可 通过 浏览 器 进行 阅读 ， 多 个 网 页 之 间 借 由 超级 链接 实现 相互 跳 
转 。 网 页 文件 的 扩展 名 通常 是 .htm、.html、.xml、.asp、.aspx、.php、.jsp 等 ， 浏 览 器 通过 
解释 网 页 文件 中 的 代码 ， 将 网 页 中 的 内 容 呈 现 给 用 户 。 

服务 器 空间 是 保存 网 页 文件 的 地 方 ， 制 作 好 的 网 页 文件 只 有 上 传 到 专门 的 服务 器 空间 
中 ， 才 能 被 远程 用 户 访问 到 。 

1.1.2 ”商业 网 站 建设 的 一 般 流程 
建设 一 个 商业 网 站 ， 通 常 需要 完成 如 下 工作 。 

1. 申请 域名 空间 


要 想 使 自己 


的 网 站 能 够 被 快速 记 住 ， 就 需要 为 网 站 选择 一 个 好 的 域名 。 域 名 的 后 组 一 


项 目 1 项目 介 绍 及 需求 分 析 沁 


般 是 .com 或 .cn，.com 表示 国际 域名 ，.cn 表示 中 国 域名 。 域 名 的 主体 要 契合 网 站 主题 ， 一 
般 与 企业 名 称 相关 ， 如 企业 名 称 的 全 拼 、 缩 写 、 英 文 等 。 还 可 以 加 地 域 或 者 数字 ， 但 是 一 
定 要 有 意义 ， 让 人 容易 记 住 。 

申请 了 域名 之 后 ， 接 下 来 需要 租用 一 个 虚拟 的 主机 空间 ， 并 把 域名 与 主机 进行 绑 定 。 
这 样 ， 当 用 户 访问 该 域名 时 ， 就 会 被 连接 到 存放 在 该 虚拟 主机 空间 里 的 网 站 上 。 

2. 进行 规划 设计 

无 论 是 个 人 网 站 、 企 业 网 站 还 是 门户 网 站 ， 制 作 前 都 要 进行 规划 设计 ， 有 目的 性 。 不 
同类 型 的 网 站 ， 其 设计 思路 也 会 有 所 不 同 。 首 先 要 对 建站 目的 和 用 户 需求 进行 分 析 ， 合 理 
规划 出 网 站 要 实现 的 各 功能 模块 ， 要 采用 的 主题 、 版 式 、 风 格 ， 以 及 主要 用 户 群 体 的 浏览 
习惯 。 同 时 ， 各 类 素材 内 容 〈 如 文本 、 图 片 等 ) 也 都 需要 在 建站 前 准备 好 。 


3. 开始 制作 网 站 


网 站 通常 分 为 前 台 和 后 台 ， 因 此 建站 也 要 从 这 两 方面 进行 考虑 。 前 台 建 设 主要 是 根据 
网 站 类 型 、 面 向 人 群 、 所 需 功 能 来 设计 版 面 ， 不 宜 太 过 杂乱 ， 一 定 要 简洁 ， 以 保证 用 户 体 
验 ， 使 访问 者 有 好 感 。 后 台 建 设 较为 复杂 ， 需 要 通过 程序 整合 前 台 页 面 ， 以 实现 初期 规划 
的 功能 ， 通 常 需要 编写 较为 复杂 的 程序 来 支持 。 


4. 测试 发 布 网 站 


网 站 程序 编写 好 后 ， 一 个 网 站 的 雏形 就 具备 了 ， 但 这 时 候 网 站 通常 是 不 完善 的 ， 需 要 
进行 测试 评估 。 要 从 用 户 体验 的 角度 多 去 观察 ， 逐 渐 完 善 。 当 网 站 的 问题 都 解决 ， 没 什么 
大 的 问题 的 时 候 ， 就 可 以 把 网 站 上 传 到 虚拟 主机 空间 里 ， 这 时 在 浏览 器 地 址 栏 中 输入 域名 ， 
就 可 以 正式 访问 网 站 了 。 

5. 维护 推广 网 站 


网 站 虽然 上 线 了 ， 但 并 不 意味 着 工作 已 经 结束 。 此 时 ， 网 站 也 许 还 有 未 被 发 现 的 漏 
洞 ， 因 此 在 网 站 上 线 之 后 还 要 继续 完善 网 站 的 不 足 。 维 护 主要 针对 网 站 的 服务 器 进行 ， 
重点 是 网 站 安全 和 网 站 内 容 方面 的 维护 。 除 此 之 外 ， 可 以 做 SEO 优化 或 者 百度 推广 ， 对 
网 站 进行 推广 (这 是 针对 百度 搜索 引擎 的 推广 ); 还 可 以 在 其 他 网 络 平台 上 推广 ， 做 互联 
网 推广 。 


1.1.3 ”动态 网 站 开发 与 ASPNET 


动态 网 站 是 与 静态 网 站 相对 应 的 。 动态 网 站 的 URL 是 不 固定 的 , 用 户 可 通过 后 台 与 网 
站 进行 交互 ， 完 成 数据 查询 、 表 单 提交 等 动作 。 
和 静态 网 站 相 比 ， 动 态 网 站 具有 以 下 特点 。 
光 ”动态 网 页 一 般 以 数据 库 技术 为 基础 ， 因 此 可 以 大 大 降低 网 站 维护 的 工作 量 。 
党 ”采用 动态 网 页 技术 的 网 站 可 以 实现 更 多 的 功能 ， 如 用 户 注册 、 用 户 登 录 、 在 线 调 
查 、 用 户 管理 、 订 单 管理 等 。 


【 兰 淮 芝 黄 福 ， 仿 冰 生 六 玲 人 下 懂 席 区 吕 本 吕 夏 】 


【 兰 汰 信 并 福全 泣 岂 六 淮 广 册 席 区 可 呈 丰 】 
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学 ”动态 网 页 并 不 是 独立 存在 于 服务 器 上 的 网 页 文件 ， 实 际 上 ， 只 有 当 用 户 请 求 时 ， 
服务 器 才 返 回 一 个 完整 的 网 页 。 

学 ”动态 网 页 中 的 “?” 对 搜索 引擎 检索 存在 一 定 的 问题 ， 搜 索引 擎 一 般 不 可 能 从 一 个 
网 站 的 数据 库 中 访问 全 部 网 页 ， 或 者 出 于 技术 方面 的 考虑 ， 搜 索 之 中 不 去 抓 取 网 
址 中 “?” 后 面 的 内 容 。 因 此 ， 采 用 动态 网 页 的 网 站 在 进行 搜索 引擎 推广 时 需要 做 
一 定 的 技术 处 理 ， 才 能 适应 搜索 引擎 的 要 求 。 

常用 的 动态 网 站 开发 技术 有 CGI、ASP、PHP、JSP、ASPNET 等 。 下 面 来 分 别 进行 

介绍 。 


1.CGI 


网 站 应 用 早期 ,动态 网 页 技术 主要 采用 CGI (Common Gateway Interface， 公 用 网 关 接 
口 ) 技术 来 实现 。 用 户 可 以 使 用 Visual Basic、Delphi、C/C++ 等 程序 编写 CGI 程序 ， 将 写 
好 的 程序 放 在 Web 服务 器 上 运行 ， 再 将 运行 结果 通过 传输 到 客户 端的 浏览 器 上 ， 从 而 实现 
用 户 与 后 台 信 息 的 交互 。 

最 常用 于 编写 CGI 技术 的 语言 是 Perl (Practical Extraction and Report Language， 文 字 
分 析 报 告 语 言 )， 它 具有 强大 的 字符 串 处 理 能 力 ， 特 别 适 合用 于 分 割 处 理 客户 端 Form 提交 
的 数据 串 。 用 它 来 编写 的 程序 后 缀 名 为 .pl。 

CGI 技术 的 功能 非常 强大 ， 但 由 于 其 具有 编程 困难 、 效 率 低下 、 修 改 复杂 等 缺陷 ， 因 
此 正在 逐渐 被 ASP、PHP、JSP 等 新 技术 所 取代 。 

2.ASP 

准确 地 说 ，ASP 是 一 个 中 间 件 ， 它 将 来 自 Web 的 请 求 转 入 一 个 解释 器 中 ， 并 在 该 解释 
器 中 对 所 有 ASP 的 Script 进行 分 析 , 然后 进行 执行 .可 以 在 这 个 中 间 件 中 创建 一 个 新 的 COM 
对 象 ， 对 其 中 的 属性 和 方法 进行 操作 和 调用 ， 再 通过 这 些 COM 组 件 完 成 更 多 的 工作 。 

所 以 说 ，ASP 的 强大 不 在 于 它 的 VBScript， 而 在 于 它 后 台 的 COM 组 件 ， 这 些 组 件 无 
限 地 扩充 了 ASP 的 能 


3.PHP 


PHP (Hypertext Preprocessor) 是 一 种 HTML 内 嵌 式 的 语言 ， 类 似 于 IIS 上 的 ASP。 

PHP 的 语法 混合 了 C、Java、Perl 以 及 PHP 式 的 新 语法 ， 可 以 比 CGI 或 Perl 更 快 
速 地 执行 动态 网 页 。PHP 能 够 支持 很 多 数据 库 ， 如 MS SQL Server、MySQL、Sybase、 
Oracle 等 。 

PHP 与 HTML 语言 具有 非常 好 的 兼容 性 ， 使 用 者 可 以 直接 在 脚本 代码 中 加 入 HTML 
标签 ， 或 者 在 HTML 标签 中 加 入 脚本 代码 ， 从 而 更 好 地 实现 页 面 控制 。PHP 提供 了 标准 的 
数据 库 接 口 ， 数 据 库 连 接 非常 方便 ， 兼 容 性 很 强 ，PHP 的 扩展 性 能 也 很 强 ， 并 可 以 进行 面 
向 对 象 的 编程 。 

PHP 优点 汇总 如 下 : 

党 ”具有 跨 平台 性 ， 属 于 有 良好 数据 库 交 互 能 力 的 开发 语言 。 


项 目 1 项目 介 绍 及 需求 分 析 忆 


学” 可 与 Apache 及 其 他 扩展 库 紧密 结合 。PHP 可 以 与 Apache 以 静态 编译 方式 结合 
来 , 与 其 他 扩展 库 也 可 以 用 这 样 的 方式 结合 (Windows 平台 除外 )。 因 此 能 最 大 化 
地 利用 CPU 和 内 存 ， 同 时 能 有 效 利 用 Apache 的 高 性 能 吞吐 能 力 。 

学 ”具有 良好 的 安全 性 。PHP 的 代码 是 开放 的 ， 在 许多 工程 师 手 中 都 进行 了 检测 ， 同 

时 ， 它 与 Apache 编译 在 一 起 的 方式 让 它 具 有 灵活 的 安全 设 定 。 


4.JSP 


JSP 页 面 由 HTML 代码 和 嵌入 其 中 的 Java 代码 所 组 成 。 服务 器 在 页 面 被 客户 端 请 求 以 
后 对 这 些 Java 代码 进行 处 理 , 然后 将 生成 的 HTML 页 面 返回 给 客户 端的 浏览 器 。Java Servlet 
是 JSP 技术 的 基础 ， 而 且 大 型 Web 应 用 程序 的 开发 需要 Java Servlet 和 JSP 配合 才能 完成 。 
JSP 具备 Java 技术 简单 易 用 、 完 全 面向 对 象 、 平 台 无 关 、 安 全 可 靠 、 主 要 面向 Internet 应 用 
JSP 的 优点 汇总 如 下 : 
学 跨 平台 特点 ， 一 次 编写 ， 到 处 运行 。 在 这 一 点 上 ，Java 比 PHP 更 出 色 一 一 除了 系 
统 之 外 ， 代 码 不 用 做 任何 更 改 。 

学 ”强大 的 可 伸缩 性 。 从 只 有 一 个 小 的 Jar 文件 就 可 以 运行 ServleWJSP， 到 由 多 台 服 务 
器 进行 集群 和 负载 均衡 ， 再 到 多 台 Application 进行 事务 处 理 、 消 息 处 理 ， 一 台 服 
务 器 到 无 数 台 服务 器 ，Java 显示 出 了 强大 的 生命 力 。 

学 ”多 样 化 和 功能 强大 的 开发 工具 支持 。 这 一 点 与 ASP 很 像 ，Java 有 许多 优秀 的 开发 

工具 ， 且 多 数 可 以 免费 得 到 。 其 中 ， 大 部 分 可 以 顺利 运行 于 多 种 平台 之 下 。 


S. ASPNET 


ASPNET 是 一 种 建立 在 通用 语言 上 的 程序 构架 ， 能 被 用 于 Web 服务 器 以 建立 强大 的 
Web 应 用 程序 。ASPNET 具有 许多 比 之 前 的 Web 开发 模式 更 强大 的 优势 。 
(1) 执行 效率 大 幅 提高 
ASPNET 把 基于 通用 语言 的 程序 在 服务 器 上 运行 , 不 像 ASP 那样 是 即时 解释 程序 ， 而 
是 当 程 序 在 服务 器 端 首次 运行 时 进行 编译 , 这 样 的 执行 效果 当然 比 一 条 一 条 的 解释 强 很 多 。 
(2) 世界 级 的 工具 支持 
ASPNET 构架 使 用 Microsoft 公司 最 新 的 Visual Studio.NET 开发 环境 进行 开发 ， 属 于 
所 见 即 所 得 (What You See Is What You Get) 的 编辑 方式 。 
(3) 强大 的 适应 性 
ASPNET 是 基于 通用 语言 的 编译 运行 的 程序 ， 具 有 非常 强 的 适应 性 ， 几 乎 可 以 运行 在 
所 有 的 Web 开发 平台 上 。 通 用 语言 的 基本 库 、 消 息 机 制 、 数 据 接口 的 处 理 都 能 无 终 的 整合 
到 ASPNET 的 Web 应 用 中 。 同 时 ，ASPNET 也 是 语言 独立 化 的 ， 也 就 是 说 ， 开 发 者 可 以 
使 用 最 适合 自己 的 语言 来 编写 程序 ， 或 者 把 程序 用 多 种 语言 来 编写 。 目 前 ，ASPNET 支持 
的 语言 有 C# (C++ 和 Java 的 结合 体 )、Visual Basic、JavaScript 等 。 这 种 多 程序 语言 协同 工 
作 的 能 力 将 使 得 现今 许多 基于 COM+ 开 发 的 程序 能 够 被 完整 地 移植 向 ASPNET。 


【 尝 维 车 沽 守 .六 漳 点 茵 给 匠 沿 讽 兴 让 可 加 2】 


【 兰 汰 芝 并 福全 泣 岂 六 淮 六 册 席 区 中 本 呈 丰 】 
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(4) 简单 性 和 易学 性 

ASPNET 在 运行 一 些 常 见 任务 〈 如 表单 提交 、 客 户 端 身份 验证 等 )、 分 布 系统 和 网 站 配 
置 时 非常 简单 。 例 如 ，ASPNET 页 面 构架 允许 用 户 建立 自己 的 分 界面 ， 使 其 不 同 于 常见 的 
VB-Like 界面 。 另 外 ， 通 用 的 语言 简化 了 开发 过 程 ， 使 得 编写 代码 像 装 配 计 算 机 一 样 简单 。 

(5) 高 效 的 可 管理 性 

ASPNET 使 用 一 种 字符 基础 的 、 分 级 的 配置 系统 ， 使 服务 器 环境 和 应 用 程序 的 设置 非 
常 简单 。 其 配置 信息 保存 在 简单 文本 中 ， 进 行 新 的 设置 时 不 需要 启动 本 地 管理 员工 具 就 可 
以 实现 。 这 种 设计 理念 使 得 ASPNET 基于 应 用 的 开发 更 加 具体 和 快捷 。 一 个 ASPNET 应 
用 程序 在 服务 器 系统 中 安装 时 ， 只 需要 简单 复制 一 些 必需 文件 即 可 ， 而 不 需要 重新 启动 系 
统 ， 一 切 就 是 这 么 简单 。 

(6) 多 处 理 器 环境 下 的 可 靠 性 

ASPNET 是 一 种 可 用 于 多 处 理 器 的 开发 工具 ， 它 使 用 了 特殊 的 无 颖 连接 技术 ， 可 极 大 
地 提高 多 处 理 器 的 运行 速度 。 

(7) 自 定义 性 和 可 扩展 性 

ASPNET 允许 开发 人 员 编 写 代码 时 自行 定义 plug-in 模块 。 也 就 是 说 ，ASPNET 可 以 
加 入 用 户 自 定义 的 组 件 。 网 站 程序 的 开发 从 来 没有 这 么 简单 过 。 

(8) 安全 性 

ASPNET 基于 Windows 认证 技术 和 应 用 程序 配置 ， 因 此 具有 较 强 的 安全 性 。 


任务 实施 


本 项 目 是 为 一 家 皮具 公司 企业 制作 网 站 ， 网 站 的 主要 功能 包括 公司 介绍 、 新 闻 信 息 的 
发 布 与 浏览 、 产 品 信 息 的 发 布 与 浏览 、 人 才 招 聘 信息 发 布 、 站 内 搜索 等 。 

整个 系统 采用 B/S 结构 ， 分 为 前 台 显 示 页 面 与 后 台 管理 系统 。 前 台 显 示 页 面包 括 公司 
介绍 、 新 闻 中 心 、 产 品 信息 、 服 务 与 支持 、 招 贤 纳 士 、 联 系 我 们 等 相应 板块 。 后 台 管 理 系 
统 包括 系统 管理 、 新 闻 管 理 、 产 品 管理 、 人 才 管理 、 企 业 信息 、 留 言 管理 等 功能 模块 ， 主 
要 实现 对 前 台新 闻 、 产 品 、 留 言 等 相关 信息 进行 增 、 删 、 查 、 改 的 操作 。 

网 站 的 系统 架构 如 图 1-1 所 示 ， 主 页 面 效果 如 图 1-2 所 示 。 


企业 网 站 
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图 1-1 系统 架构 


项 目 1 


项 目 介绍 及 需求 分 析 如 


图 1-2 网 站 主页 效果 


用 户 通 过 登录 页 面 ， 可 登录 后 台 ， 进 行 后 台 管 理 功能 操作 。 前 台 登 录 页 面 和 后 台 管 理 


系统 的 界面 效果 如 图 1-3 和 图 1-4 所 示 。 
哈 迪 斯 皮具 


欢迎 使 用 后 台 管 理 系统 


前 进 ”注销 退出 


【党 给 营 操 字 人 芒 汶 由 总 玲 全 戏 席 兴办 本 叶 本】 


和 动态 网 站 建设 案例 教程 (ASP.NET) 


任务 2 安装 开发 环境 


本 项 目 网 站 采用 B/S 结构 ， 技 术 上 将 采用 ASPNET (C#) 语言 、SQL Server 2012 数据 
库 、IIS 来 实现 ， 开 发 工具 则 采用 Visual Studio 2010 开发 环境 。 

本 任务 的 重点 就 是 学 习 如 何 搭建 Visual Studio 2010 开发 环境 和 安装 SQL Server 2012 
数据 库 软 件 。 


相关 知识 
1.2.1 认识 Visual Studio 2010 


Visual Studio 由 微软 公司 推出 ,是 目前 最 流行 的 Windows 平 台 应 用 程序 开发 环境 .Visual 
Studio 2010 版 本 于 2010 年 4 月 12 日 上 市 ， 其 集成 开发 环境 (IDE) 的 界面 简单 明了 ， 支 
持 NET Framework 4.0、Microsoft Visual Studio 2010 CTP， 并 且 支 持 开 发 面向 Windows 7 
的 应 用 程序 。 除 了 Microsoft SQL Server， 它 还 支持 IBM DB2 和 Oracle 数据 库 。 

Visual Studio 2010 的 启动 界面 如 图 1-5 所 示 。 


st 
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【党 给 营 操 信念 洋 点 渗 天 臣 内 讽 装 加 和 BN】 


图 1-5 Visual Studio 2010 的 启动 界面 


Visual Studio 2010 具备 如 下 新 特性 。 

党 ”精心 打造 云 计 算 架 构 ， 使 在 线 应 用 软件 的 开发 及 应 用 更 为 简洁 。 

学 ”在 敏捷 开发 中 ， 把 Scrum 作为 基本 的 Agile 开发 模型 ， 真 正 实 现 了 方法 论 。 

学 ”可 搭配 Windows 7、Silverlight4， 在 RIA 应 用 、Web 应 用 上 有 较 大 切入 ， 使 Web 
应 用 达到 一 个 新 境界 。 

党 ”加 大 了 对 多 核 并 行 运算 的 支持 。 

学 ”增强 了 C++ IDE， 可 更 好 地 支持 C++。 


项 目 1 项目 介 绍 及 需求 分 析 沁 


下 面 对 这 些 新 特性 进行 详细 介绍 。 

首先 ，Visual Studio 2010 中 ， 不 仅 在 云 开 发 前 端 给 出 指示 ， 在 后 端 也 对 云 计算 提供 了 
一 站 式 服务 。 只 需 单 击 一 下 按钮 ， 开 发 完成 的 应 用 就 会 快速 生成 两 个 文件 ， 成 为 一 个 应 用 
程序 包 。 将 这 两 个 文件 上 传 到 Windows Azure 计算 平台 上 ， 打 开 链 接 登 录 ， 就 可 以 在 线 看 
到 应 用 程序 最 后 实现 的 效果 。 

这 是 Visual Studio 2010 在 云 计算 应 用 方面 的 拓展 ， 即 使 用 大 家 熟悉 的 软件 开发 工具 快 
速 搭建 在 线 应 用 软件 ， 然 后 一 键 把 现 有 应 用 发 布 在 Azure 平台 上 。 

其 次 , 在 Visual Studio 2010 中 , 项 目 过 程 模板 的 变化 很 大 , 把 Scrum 作为 了 基本 Agile 
开发 模型 (Scrum 模型 为 基础 参考 导向 )。TFS 2010 中 集成 了 MSF for Agile Software 
Development v5.0， 可 操作 性 上 又 融合 了 敏捷 等 软件 开发 流程 思想 模型 ， 使 从 事 .NET 项 目 
开发 的 用 户 拥 有 了 一 把 利 剑 。 

RIA 使 得 互联 网 应 用 可 以 像 桌 面 应 用 一 样 丰富 多 彩 。 在 Visual Studio 2010 中 ， 微 软 采 
用 全 新 的 WPF 技术 重新 打造 了 编辑 器 ， 新 编辑 器 和 Visual F# 的 功能 更 加 强大 ， 如 代码 可 
以 无 级 缩放 ， 多 窗口 可 以 即时 更 新 ， 代 码 可 以 自动 产生 等 ， 这 些 新 的 IDE 特性 极 大 地 提高 
了 程序 员 的 开发 效率 。 

再 次 ，Visual Studio IDE 对 并 行 计算 开发 提供 了 大 量 支 持 。 例 如 ，Visual Studio 2010 的 
调试 器 知道 代码 的 并 行 特性 ， 并 能 在 调试 程序 的 不 同 执行 单元 时 表现 出 应 用 程序 的 状态 。 
非 托 管 的 C++ 库 和 编译 器 、.NET Framework 4.0 也 都 对 并 行 计算 提供 了 大 量 支持 ， 包 括 
PLINQ、 并 行 语言 语句 等 。 

Visual Studio 2010 还 提供 了 一 个 并 行 性 能 分 析 器 ， 它 可 以 帮助 分 析 应 用 程序 的 性 能 瓶 
颈 ， 找 到 需要 并 行 处 理 和 可 以 进行 并 行 处 理 的 地 方 ， 并 以 图 形 化 的 形式 表现 出 来 。 配 合 
Visual Studio 2010， 用 户 可 以 轻松 地 实现 应 用 程序 的 并 行 化 。 

Visual Studio 2010 将 成 为 和 Visual Studio 6 一 样 的 经 典 开 发 工具 。 在 语言 层面 , 支持 最 
新 的 C++ 标准 ; 在 IDE 及 MFC 库 等 方面 ， 也 下 了 很 大 的 力气 。Visual C++ 不 仅 改 善 了 IDE 
的 效率 ， 同 时 也 引入 了 很 多 新 的 特性 ， 这 些 IDE 增强 能 够 切实 提高 程序 员 们 的 开发 效率 。 


1.2.2 Visual Studio 2010 的 安装 要 求 


安装 Visual Studio 2010 开发 环境 之 前 ， 需 要 先 检 查 计算 机 的 软 硬 件 配置 是 否 满足 安装 
要 求 ， 具 体 要 求 如 下 。 
学 ”处 理 器 : 最 少 1.6GHz 处 理 器 ， 建 议 使 用 2.0GHz 双核 处 理 器 。 
% ”RAM: 最 少 1GB， 建 议 使 用 2GB 内 存 。 
学 ”可 用 硬盘 空间 : 系统 驱动 器 上 需要 5.4GB 的 可 用 空间 。 
% ”操作 系统 : Windows Server 2003 (SP2)、Windows Vista、Windows 7。 


1.2.3 认识 SQL Server 2012 


动态 网 站 一 般 以 数据 库 技术 为 基础 ， 因 此 可 以 非常 方便 地 实现 用 户 注册 、 用 户 登 录 、 
在 线 调查 、 用 户 管理 、 订 单 管理 等 功能 。 


【党 给 车 沽 守 ， 仿 泣 年 六 玲 人 项 兴 只 丰 器 夏 】 


【从 给 营 操 信念 洋 点 汕 珊 宾 山 讽 半 加 和】 
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本 项 目 将 采用 SQL Server 2012 数据 库 来 实现 对 后 台数 据 的 增 、 删 、 查 、 改 操作 。 

SQL Server 是 Microsoft 公司 开发 的 系列 数据 库 管 理 平台 ， 是 一 个 可 信任 的 、 智 能 的 、 
高 效 的 数据 库 系 统 平台 ， 能 满足 大 中 型 数据 管理 系统 的 需求 。 目 前 ， 使 用 较为 广泛 的 是 其 
SQL Server 2012 版 本 。 


1.2.4 SQL Server 2012 的 安装 要 求 
要 安装 SQL Server 2012 数据 库 ， 计 算 机 需要 满足 以 下 软 硬 件 条 件 。 
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硬盘 : 最 少 6GB 的 可 用 硬盘 空间 。 

驱动 器 : 从 磁盘 进行 安装 时 ， 需 要 相应 的 DVD 驱动 器 。 

显示 器 : 有 Super-VGA (800X600) 或 更 高 分 辨 率 的 显示 器 。 

.NET Framework: 在 选择 数据 库 引 擎 、Reporting Services、Master Data Services、 
Data Quality Services、 复制 或 SQL Server Management Studio 时 , NET 3.5 SP1 是 
SQL Server 2012 所 必需 的 ， 但 不 再 由 SQL Server 安装 程序 安装 。 

Windows PowerShell: SQL Server 2012 不 安装 或 启用 Windows PowerShell 2.0; 但 
对 于 数据 库 引擎 组 件 和 SQL Server Management Studio 而 言 ，Windows PowerShell 
2.0 是 一 个 安装 必 备 组 件 。 如 果 安 装 程序 报告 缺少 Windows PowerShell 2.0， 可 以 
按照 Windows 管理 框架 页 中 的 说 明 安装 或 启用 它 。 

网 络 软件 : SQL Server 2012 支持 的 操作 系统 具有 内 置 网 络 软件 。 独 立 安装 的 命名 
实例 和 默认 实例 支持 以 下 网 络 协议 : 共享 内 存 、 命 名 管道 、TCP/P 和 VIA。 


任务 实施 


步骤 1: 安装 Visual Studio 2010 开发 环境 。 


1) 下 载 Visual Studio 2010 软件 包 。 


(2) 解压 文件 ， 如 图 1-6 所 示 ， 然 后 双击 安装 包 内 setup.exe 文件 。 
(3) 进入 Visual Studio 的 安装 程序 界面 ， 单 击 “ 安 装 Microsoft Visual Studio 2010” 超 
链接 ， 如 图 1-7 所 示 。 


ED 
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-~ a。 | GO Visual studio 2010 
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2 病人 语言 ， 04 工具 浴池 Yisuel Studic 2010 [更 Werosofk Visual Studio 2010 安装 程序 [se_[®J[E 


雪 装 Wicrosoft Visual Studio 2 
OO eresoft Wis stoio 2070 能 和 所 希 的 组 伯 - 


查看 自述 文件 W] 「 退出 0) | 


图 1-6 ”Visual Studio 2010 安装 文件 图 1-7 安装 程序 界面 


项 目 1 项 目 介绍 及 需求 分 析 忆 


(4) 进入 Visual Studio 2010 加 载 组 件 界面 ， 单 击 “ 下 一 步 ” 按 钮 ， 系 统 开始 加 载 安 
装 组 件 ， 如 图 1-8 所 示 。 


加 Microsoft Visual Studio 2010 诊 邓 版 Slelw 


EV Visual Studio 2010 旗 觅 版 


好 蚀 miereseft Yisual Studie 2010 旗舰 版 安 


此 向 导 将 引导 您 完成 此 程序 及 所 需 全 部 组 件 的 支 装 过 程 。 


如 汪汪 a Studio 安装 体验 的 


i crosoft Corporation 发 送 有 关 我 的 安装 体验 的 


记 有 关 详细 信息 ， 请 阅读 


安装 程序 正在 加 载 安装 组 件 。 


一 


图 1-8 ”加载 组 件 界面 


(5) 进入 Visual Studio 2010 的 许可 协议 界面 ， 选 中 “我 已 阅读 并 接受 许可 条 款 ” 单 
选 按钮 ， 单 击 “ 下 一 步 ” 按 钮 ， 如 图 1-9 所 示 。 


喇 Microsoft Visual Studio 2010 独 归 版 安装 程序 - 起 始 页 EEN 


OO Visual studio 2010 tpg 


A ner, 然后 再 继续 安装 。 于 卫生 隐 中 BR 所 有 取 和 和 要 外" 必须 接受 许可 
MICROSOFT 软件 许可 条 款 = 
D De MICROSOPT VISUAL STUDIO 2010 识 舰 版 四 WICROSOFT VISUAL STUDIO 
卓 erosoft 应 用 程序 模 误 报告 2010 旗舰 版 试用 版 
WC 9.0 Runtine (x88) 
» WC 10.0 Runtine (x88) 这 些许 可 条 蒜 是 由 crosoft Corporation (或 您 所 在 地 的 Microsoft 
i of Corporation 关联 公司 》 与 您 之 间 达 成 的 协议 。 请 闪 沪 条 寺内 容 。 这 些 
i 订 获 适用 于 上 述 软件 ， 包 括 您 用 来 接收 该 软件 的 介质 《如 有 ) 。 这 些 条 二 
， 上 crosoft Visual Studio 2010 64 位 系统 必 备 打印 ®)... | 
A) 
soft Wisaal Stodio 2010 名 按 Face Dera 键 可 查看 更 多 内 容 -。 
我 已 阅读 并 接受 许可 条 款 CA)。 
我 不 接受 许可 条 教 0) 。 


ME “15 


图 1-9 许可 协议 界面 


【 兰 玲 芝 江 福全 六 是 总 下 全 懂 席 迷路 朴 员 可】 


【 兰 淮 位 洪福， 人 芒 泣 由 六 淮 六 册 席 党 中 相遇 丰 】 


12 


忆 动态 网 站 建设 案例 教程 (ASP.NET) 


(6) 进入 安装 路 径 选择 界面 ， 选 中 左 侧 的 “ 自 定义 ” 单 选 按钮 ， 然 后 在 右 侧 选择 程序 
要 安装 的 位 置 ， 并 单 击 “ 下 一 步 ” 按 钮 ， 如 图 1-10 所 示 。 


岂 Microsoft Visual Studio 2010 旋 上 版 安 美 程序 - 运 项 页 CEE 


EVVisual Studio2010 讽 版 安装 


先 撞 要 安装 的 功能 65): 功能 明 
完全 @) pe 
府 各 sse ss 此 选项 多 许 您 选择 要 去 装 于 此 功能 。 
司 自 定义 o) 
看 下 一 页 上 过 拉 要 安 六 各 汪 训 和 工 
产品 安装 路 径 @) 


Li\Frogran Files (x66)\WMicrosoft Visual Studio. 


所 需 谎 盘 空 间 : 

卷 说 盘 大 小 。 可用 必需 惠 余 > 
ce: B016 3050 180 30.6 08 | 
1 50.0 6B 49.5 8 0 字 节 49.5 068 

了 29.9 6GB 29.6 08 0 字 节 29.8 GB 

了 158.0 GB 149.968 0 字 节 149.968 ~ 


和 ED 


图 1-10 “安装 路 径 选 择 界面 


(7) 进入 程序 功能 选择 界面 , 选择 要 安装 的 程序 , 这 里 取消 选中 Visual Basic 和 Visual 
F# 复 选 框 ， 然 后 单 击 “ 安 装 ” 按 钮 ， 如 图 1-11 所 示 。 


也 Microsof Visual Studio 2010 路 蚁 版 安装 得 序 - 迁 项 页 ela ls 


ENVisual Studio 2010 放 M 反 安装 


选择 要 安装 的 功能 (5) : 功能 说 明 : 
日 国生 i ft Yisual Studie 2010 旗舰 版 河 


Microsoft SharePoint 到 和 J 遇 : 工具 以 用 于 创 


Microsoft Viswal Studio 2010 
建 、 自 定义 和 扩展 Wierosoft ShurePoint 站 点 


着 要 支持 中 rexoft_ ShePoint 开发 在 有 crosoft is 。 到 


Ox 


和 下 篇 权 中队 We i. eb ge 3 还 应 选 
昌 人 和 
ne Se ee 


回访 Wicrosoft 0ffice 开发 人 员工 具 (x64) 
回 名 Wieresoft 0ffiee 开发 人 员工 具 (x64) 语 
otfascator 软件 服务 - 社区 版 功能 安装 路 径 F) 


osoft SQL Server 2008 Express S 


Fe Tiles CO) VWicrosEl Visodl SG 剂 览 
口 Wieresoft SharePoint 开发 人 员工 具 
所 夭 碰 盘 空 间 
耸 碰 盘 大 小 本 用 必需 稀 余 SS 
区 6016 35 15 30.968 | 
了 500G 得 568 0 字 节 49.5 GB 
了 29.9 @B 29.8 08 0 字 节 29.8 GB 
了 158.0@ 149.968 0 字 节 149.968 = 


图 1-11 安装 功能 选择 界面 


项 目 1 项目 介 绍 及 需求 分 析 所 


(8) 程序 开始 安装 , 并 显示 安装 进度 , 如 图 1-12 所 示 。 本 步 大 致 需要 30 分 钟 时 间 (时 
间 长 短 与 用 户 选 择 安装 的 功能 模块 多 少 有 关 ) 。 


总 MicrosoR Visual Studio 2010 鹿 观 版 安装 程序 - 安装 页 Ee 


EV Visual studio 2010 放 WU 安装 


正在 安装 组 件 


中 胆 crosoft 应 用 程序 锚 误 报告 
VC 9.0 Runtine (x66) 
MYC 10.0 Runtine (x66) 
MVC 10.0 Runtine (x64) 


crosoft .ET Pranevork 4 简体 中 文 语言 包 
rosoft Studio 2010 64 位 系统 必 备 (x64) 
acro Tools 

ie Hsero Tools CIS 语言 包 


crosoft Web 部 署 工具 (x64) 
oft ASP WET NVC 2 - Yisasl Studio 2010 工具 
旧 ”Wierosoft ASP, 了 eT WWC 2 - Visusl Studie 2010 工具 语言 包 - 简体 中 文 
|_ Merosoft ASP. NET IC 2 = 


正在 安装 卓 crosoft 应 用 程序 措 误 报告 


上 一 步 中 ] | 下 一 步 D 


图 1-12 程序 安装 界面 
(9) 安装 完成 后 ， 会 提示 安装 成 功 ， 如 图 1-13 所 示 。 


EOD Visual studio 2010 Hel 2 


成 功 是 安全 声明 : 强 刘 建议 
已 安装 Wiyual Studio 2010， 并 且 设置 完毕 。 此 外 生生 局 用 
多 和 和 其 伯 下 
. 明 
人 查 香 全 这 忒 用 
检查 友基 三 
充实 您 的 工具 箱 。 


和 
扩展 ， 以 便 进 一 步 提 嘉 开发 效率 
单 击 即 可 获得 帮助 ! 


本 村 


图 1-13 ”安装 成 功 界面 


步骤 2: 安装 SQL Server 2012 数据 库 。 
(1) 在 光驱 中 放 入 安装 光盘 ， 运 行 界面 如 图 1-14 所 示 。 
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【演奏 膏 灌 村 .六 济 此 茵 坊 匠 内 痪 半圆】 


【党 给 党 操守 .六 洪 由 六 站 交 山区 当 相映 夏 】 
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区 SQL Server 安装 中 心 A 


入 25 SQL Server 驰 立 安装 或 向 现 有 安装 添加 功能 
启动 向 导 ,在 非 群集 环境 中 安装 SQL Server 2012 或 向 现 
有 SQL Server 2012 实例 中 添加 功能 . 

入 的 SQL Server 夏阳 转移 群生 安装 
启动 向 导 ,安装 单 节 点 的 SQL Server 2012 故障 转移 群 
集 - 


久 融 则 史 革 出 直 


冯 向 SQL Server 故 自转 移 群 集 泛 加 五 点 

¥ 启动 向 导 , 向 现 有 SQL Server 2012 故障 转移 群集 中 添加 
芋 点 . 
从 SQL Server 2005、SQL Server 2008 或 SQL Server 
2008 R2 升级 


启动 向 导 , 将 SQL Server 2005、SQL Server 2008 或 
SQL Server 2008 R2 升级 到 SQL Server 2012, 


Giserverxow 


图 1-14 光盘 运行 界面 


(2) 在 左 侧 选择 “安装 ”选项 ， 在 右 侧 选择 “全 新 SQL Server 独立 安装 或 向 现 有 安 
装 添加 功能 ”选项 ， 开 始 检测 安装 程序 支持 规则 ， 如 图 1-15 所 示 。 


显示 洋 妇 信息 (5) > > 重新 运行 (R) 
下 看 详 证 控 索 (V) 


确定 取消 


图 1-15 安装 程序 支持 规则 
(3) 在 所 有 检测 通过 后 ， 单 击 “ 确 定 ”按钮 ， 进 入 产品 密 钥 输入 界面 ， 如 图 1-16 所 示 。 


项 目 1 项 目 介绍 及 需求 分 析 总 


产品 密 钥 
指定 要 安装 的 SQL Server 2012 版 本。 
产品 密 钥 re Microsoft 真是 证 书 或 产品 包装 上 的 由 25 个 字符 诠 成 的 密 钥 来 验证 此 SQL Server 2012 实 
许可 条 款 将 也 可 以 描 定 SQL Server 的 免费 厂 李 ,例如 Evaluation 或 Express 如 SQL Server 联机 从 书 中 所 
二 Evaluation 具有 SQL Server 的 全 部 功能 , 且 已 激活 ， 有 180 天 试用 期 。 要 从 - 
产品 更 新 本 ,请 运行 版 本 升级 向 导 . 
安装 安装 程序 文件 
口 揪 定 可 用 版 本 (S): 
Evaluation 
加 久 入 产品 密 铀 (E): 


< 上 (8) [Fp >|| WW | 
图 1-16 输入 产品 密 钥 
(4) 输入 密 钥 后 ， 单 击 “ 下 一 步 ” 按 钮 ， 接 受 许可 条 款 ， 如 图 1-17 所 示 。 


者 要 安装 SQL Server 2012 , 必须 溢 受 Microsof 软件 许可 冬 驶 . 


产品 密 钼 
许可 条 款 
产品 更 新 IMICROSOFT SQL SERVER 2012 ENTERPRISE SERVER/CAL EDITION 


和 这 些许 可 条 教 是 Microsoft Corporation (或 您 所 在 地 的 Microsoft Corporation 关联 公司 ) 与 您 之 
站 达成 的 协议 。 请 阅读 条 蓝 内 容 。 这 些 条 获 适 用 于 上 述 软件 ， 包 括 您 用 未 接收 该 软件 的 介质 《如 
有 ) ， 这些 条 区 也 适用 于 Microsoft 为 该 软件 提供 的 任何 
。 更 新 
|。 补充 程序 
|。 基于 Internet 的 服务 和 


I。 古 封 归 科 


IMICROSOFT 软件 许可 条 元 口 


Er 3 
复制 (中 。 打印 (BB) 
加 我 接受 许 可 匀称 (名 


口 想 能 使 用 情况 数据 发 送 到 Microsoft。 功 能 使 用 情况 数据 包括 有 关 称 的 硬件 配置 以 及 您 对 SQL 
ts 及 其 诅 件 的 使 用 情况 的 信息 (日 . 


有 关 洋 深信 息 , 清 参 网 Microsof SQL Server 2012 隐私 声明 。 


[< 上 一 步 ( 印 | 下 -一步 > ]| ww | 


1-17 许可 条 款 界 面 


(5) 单 击 “下 一 步 ” 按 钮 ， 开 始 安装 SQL Server 2012 安装 程序 文件 ， 如 图 1-18 


所 示 。 


5 


【 尝 淮 信 并 福全 溢 生 六 兴 并 蕊 项 学 中 二 呈 夏 】 


【演奏 车 操 信念 注 点 溃 项 宾语 讽 装 加 车 】 


16 


忆 动态 网 站 建设 案例 教程 (ASP.NET) 


将 立即 安装 SQL Server 安装 程序 。 如 果 找到 SQL Server 安装 程序 的 更 新 并 插 定 要 包 会 在 内 ， 则 也 构 安 美 更 新 . 


Re WE 
许可 科 歌 s 
产品 更 新 正在 系统 上 安装 SQL Server 安装 程序 文件 . 
安 要 安 要 程序 文件 4 3 

Es E23 

下 坟 安 壬 序 文件 ED 

进取 安 竺 但 序 文 伯 Es 

安安 壬 序 文件 正二 


< 上 (|| 安 半 0 | WW | 
图 1-18 “安装 安装 程序 文件 ”界面 


(6) SQL Server 2012 安装 程序 文件 安装 完毕 后 ， 单 击 “ 安 装 ” 按 钮 ， 再 次 进入 “ 安 
装 程序 支持 规则 ”界面 ， 如 图 1-19 所 示 。 


安装 程序 支持 规则 可 确定 在 次 安装 SQL Server 安装 得 序 支 持 文件 时 可 能 发 生 的 问题 ， 必 须 更 正 所 有 失败 ， 安 装 程 序 本 能 
3 


损 作 充 成 。 已 通过 : 7。 失败 0 警告 1。 已 部 过 0. 


刚 散 洋 冯 信息 (S) << 
二 要 洋 纵 授 碌 (V) 


Fm 
加 全 志和 动机 太志 (ATU 


@ 时 网 版 本 的 SQL Server 2008 Busi 
加 | 没有 有 与 SQL Server "Denali" CTP0 一 同安 装 的 SxS 
图 针对 SQL Server 注册 表 项 的 一 各 性 洽 还 
@ HE 

加 Microsoft .NET 应 用 眉 序 安全 性 


下 一 步 (N) > 


图 1-19 “安装 程序 支持 规则 ”界面 


(7) 在 检测 规则 通过 后 ， 单 击 “ 下 一 步 ” 按 钮 ， 进 入 设置 角色 界面 ， 如 图 1-20 所 示 。 
选中 “SQL Server 功能 安装 ” 单 选 按钮 ， 然 后 单 击 “ 下 一 步 ” 按 钮 。 


项 目 1 项目 介绍 及 需求 分 析 忆 


设置 角色 
单 二 "SQL Server 功能 安装 这 项 以 逐个 迁 和 要 安装 的 功能 组 件 ， 或 单 主 划 个 功能 角色 以 安装 符 定 本 于 - 
安装 程序 支持 规则 图 SQL Server 功能 安装 加 ) 
设置 角色 安装 SQL Server 数 专 库 引擎 号 务 、Analysis Services、Reporting Services. Integration Services 
功能 远 择 和 其 他 功能 . 
安装 规则 O SQL Server PowerPivot for SharePoint(P) 
磁盘 空间 要 求 在 新 的 或 现 有 的 SharePoint 2010 服务 遍 上 安装 PowerPivot for SharePoint 以 支持 场 中 的 
错误 报告 
安装 本 要 规则 
准备 安装 
安装 进度 
这 成 


< 上 一步 (B | | 下 一 步 (N) > 取消 帮助 
图 1-20 “设置 角色 ”界面 
(8) 在 “功能 选择 ”界面 中 单 击 “ 全 选 ” 按 钮 ， 选 择 所 有 功能 ， 并 设置 软件 的 安装 位 
置 ， 然 后 单 击 “ 下 一 步 ” 按 钮 ， 如 图 1-21 所 示 。 
安装 程序 支持 规则 功 草 (B 功能 党 明 : 
设置 角色 实 B4I 能 二 [SQL Server ^ 
功能 选择 至 所 库 引 区 训 务 作者 与 其 他 SQL Server 实例 分 开 . 
安装 规则 回 SQL Server 复制 SQL Server 实例 可 以 在 同一 台 计算 机 上 并 行 
| 回 全 文 和 得 义 提 取 搜 索 本 
Data Quality Services 
辜 盘 空间 要 求 团 Analysis Services | 
服务 器 配置 回 Reporting Services -本 机 v 
数据 库 引擎 配置 共享 功能 | 
Analysis Services 卫生 回 Reporing Services - Sharepoint | | 二 二 MA 各 引 人 
Reporting Services 配置 EF [es ee ene ee ee NET Framework 4.0 站 
分 布 式 量 允 控制 移 回 SQL Server Data Tools _ Windows PowerShell 2.0 
分 布 式 重播 客户 湛 回 癌 广 疾 工具 注 接 Microsoft .NET Framework 3.5 
错误 报告 回 Integration services 要 从 介 括 安装 加 
安装 配置 规则 回 套 广 闺 工具 向 后 蒜 容 性 ] Microsoft Visual Studio 2010 Shell 
准备 安装 < 而 I BG 口 [L [> 
re SN | [SAEY 
共享 功能 目录 (9: CNprogram Files\Microsoft SQL Server\ i 


共享 功能 目录 (x86)00: CA\Program Files (x86)\Microsoft SQL Server\ | 


< 上 一 步 ( 妈 | | 下 一 步 (N) > 取消 帮助 


图 1-21 进行 功能 选择 
(9) 安装 规则 检测 完成 后 ， 单 击 “ 下 一 步 ” 按 钮 ， 如 图 1-22 所 示 。 


【 尝 淮 位 商 福全 并 由 六 淮 仅 蕊 或 学 中 本 呈 夏 】 


【 兰 淮 位 洪福 六 泣 由 六 淮 广 册 席 区 中 本 呈 丰 】 
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实 装 得 序 正在 运行 规则 以 确定 是 否 要 阻止 安装 过 但。 有 关 洋 绍 信息 ， 请 单 主 -帮助 


数据 库 引擎 配置 
Analysis Services 配置 
Reporting Sevices 配置 


扣 作 完成 。 已 通过 : 1。 失 败 0。 敬告 0。 已 跳 过 0. 


显示 洋 细 信息 (和 ) >> 重新 运行 B) 
下 看 洋 组 要 去 (V) 


< 上 - 步 (B 


1-22 ”检测 安装 规则 


(10) 设置 实例 ID 和 目录 ， 如 图 1-23 所 示 ， 然 后 单 击 “ 下 一 步 ”按钮 。 


措 定 SQL Server 实例 的 名 称 和 实例 1D， 实 例 1D 将 成 为 安 美 路径 约 一 部 分 , 


@ 是 认 实 吨 (D) 


口 合生 实例 (A): MSSQLSERVER 

| WIDQ: MSSQLSERVER 
实例 恨 目录 (R): CNprogram Files\Microsoft SQL Server\ 可 
SQL Server 目录 : Ci\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER 


Analysis Services 目录 Ci\Program Files\Microsoft SQL Server\MSAS11.MSSQLSERVER 
Reporting Services 目录 : C:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER 


已 安装 的 实例 (U: 
实例 名 称 实例 ID 功能 


< 上 -水 (B) | | 下 一 步 IN > sd 帮助 


1-23 ”实例 配置 界面 


(11) 此 时 系统 将 开始 计算 磁盘 空间 需求 ， 如 图 1-24 所 示 。 


项 目 1 项目 介 绍 及 需求 分 析 所 


设置 角色 日 加 更 动 器 C 寺 要 7820 MB , 有 14850 MB 可 用 

功能 远 择 系统 驱动 右 (C:\: 需要 3884 MB 

安装 规则 共享 安装 目录 (C:\Program Files\Microsoft SQL Server\): 需要 1642 MB 
安生 实 网 目录 (CAProgram Files\Microsoft SQL ServerV: 需要 2294 MB 


< 上 一 步 (B) | | 下 一 步 (N) > 取消 帮助 


图 1-24 计算 磁盘 空间 要 求 
(12) 继续 单 击 “ 下 一 步 ” 按 钮 ， 进 行 服务 器 配置 ， 如 图 1-25 所 示 。 


服务 器 配置 
指定 服务 央 户 和 排序 规则 配置 . 
安装 程序 支持 规则 服务 炭 户 排序 规则 | 
设置 角色 
Microsof 建议 你 对 每 个 SQL Server 服务 使 用 一 个 单独 的 帐户 (NM 
安装 规则 ES 记名 E33 
实例 配置 SQL Server 代理 NT Service\SQLSERVE... 
磋 香 宇 间 要 求 SQL Server 数 掺 亩 引 学 [NT Service\MSSQLSE.. 
服务 器 配置 SQL Server Analysis Sevices |] NT Service\MSSQLSer.. 
数据 库 引 地 配置 SQL Server Reporting Services “| NT Service\ReportSer.. 
Analysis Services 配置 SQL Server Integration Service.. NT Service\MsDtsServ... 
Reporting services 配置 SQL Server Distributed Replay -| NT Service\SQL Serve.. 
分 布 式 重 福 控制 器 |SQt Server Distributed Replay -| NT Service\SQL Serve.. | 
分 布 式 重播 客 广 锯 SQL 全 文 访 迁 误 后 台 程 序 启动 器 。 “NT Service\MSSQLFDL. 
错误 报告 SQL Server Browser NTAUTHORITYLOCA-. 
| 
准备 安 壬 
安装 进度 
充 焉 
| < 上 -沙田 | 下沙 N>]| ws || ww 


图 1-25 进行 服务 器 配置 


(13) 单 击 “ 下 一 步 ” 按 钮 ， 进 行 数据 库 引 擎 配置 。 这 里 选中 “混合 模式 ” 单 选 按钮 
并 设置 密码 ， 然 后 单 击 “ 添 加 当前 用 户 ” 按 钮 ， 如 图 1-26 所 示 。 
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【 尝 冰 位 商 福全 并 年 六 淮 仅 蕊 项 学 中 可 呈 夏 】 


【学 束 芒 洪 人 ， 芒 汶 是 总 下 全民 开 兴 站 本 呈 直 】 
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获 近 目录 | FLESTREAM 


过 杠 定 身份 闪 楼 式 和 管理 只。 
身份 闪 模式 
口 Windows 身份 验证 模式 (W) 

混合 楼 式 (SQL Server 身份 验 让 和 Windows 身份 验 训 (MI) 
3 学 本 轩 为 SQL server 系统 管理 员 (5al 帕 括 二 二 吏 。 
Anabysis Services 国王 护 入 3( 目 : [ooeeee 
ee 确认 二 3(Oj: seeeee 

分 布 区 重阳 过 制 器 
分 布 量 江 客 户 甸 指定 SQL Server 管理 员 


SQL Sever 


< 上 -(B) | | 下 一 步 IN > 取消 各 助 


图 1-26 进行 数据 库 引擎 配置 


(14) 单 击 “ 下 一 步 ” 按 钮 ， 进 入 “Analysis Services 配置 ”界面 ， 设 置 服务 器 模式 、 
管理 员 和 数据 目录 。 这 里 单 击 “ 添 加 当前 用 户 ” 按 钮 ， 如 图 1-27 所 示 。 


Analysis Services 配置 
指定 Analysis Services 服务 器 模式 、 答 理 员 和 黎 所 目录. 


服务 器 配置 | 数据 目录 
服务 器 模式 : 
图 多 准 和 数据 控 近 模式 1 
口 秦 格 模式 (了 
揪 定 哪些 用 户 具有 对 Analysis Services 的 管理 权限 . 


安装 程序 支持 规则 
设置 角色 

功能 选择 

安装 规则 

实 人 8 配置 

磁盘 空间 要 求 

最 务 训 在 秆 Analysis Services 管理 员 
数据 库 引擎 配置 对 Analysis Services 具 
EN 有 不 受 限制 的 访问 权限 
Reporting Services 配置 

分 布 式 重 操控 制 器 

分 布 式 重播 宕 户 甘 

错误 报告 

安装 配置 规则 

准备 安装 

安装 进度 

完成 


添加 当前 用 户 (Q@ | | 添加 (A | 利 除 (R) 


< 上 (8 || 下 -IN > || 了 一 


图 1-27 “Analysis Services 配置 ”界面 
(15) 继续 单 击 “ 下 一 步 ” 按 钮 ， 进 行 Reporting Services 配置 ， 如 图 1-28 所 示 。 
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项 目 1 项目 介 绍 及 需求 分 析 沁 


Reporting Services 配置 


指定 Reporting Services 本 二 模式 . 
安装 程序 支持 规则 Reporting Services 本 机 模式 
SS 回 安 半 和 配 午 (O. 
功能 远 择 在 本 机 模式 中 安 美和 配置 报表 服务 问 ， 报表 波 务 器 将 在 安装 完成 后 下 营运 行 。 
2 口 仅 安 壬 (0), 
实 B 本 得 安装 报 委 最 务 器 文件 。 安 竺 完成 后 ， 使 用 Reporting Services 配 轩 管理 二 配 置 报表 服务 坊 用 于 
辜 衣 空间 要 求 本 机 模式 
SE Reporting Services SharePoint 生成 式 
数 丘 库 引 要 配置 
Analysis services 配置 @ 仅 安装 (9. 

安装 报表 服务 器 文件 .安装 完成 后 ,使 用 SharePoint 管理 中 心 完 世 配置 .确认 SQL Server 

Reporting Services 配置 Reporting Services 她 务 已 启动 并 县 创建 至 少 一 个 SQL Server Reporting Services 服务 应 用 
分 布 式 重担 演 害 器 程序 。 有 关 洋 绍 信息 ， 清 音 -帮助 -。 
分 布 式 重担 客户 疾 
错误 报告 
安 半 本 午 规 则 
准备 安 奖 
安装 进度 
完成 


< 上 一 步 (B) | | 下 一 步 (N) > 取消 帮助 


1-28 进行 Reporting Services 配置 


(16) 单 击 “ 下 一 步 ” 按 钮 ， 进 行 分 布 式 重播 控制 器 设置 ， 如 图 1-29 所 示 。 单 击 “ 添 
加 当前 用 户 ” 按 钮 ， 然 后 单 击 “ 下 一 步 ”按钮 。 


Analysis Services 配置 
Reporting Services 配置 
分 布 式 重播 控制 器 


分 布 式 重 筷 客 户 详 
错误 报告 


安装 配置 规则 
准备 安装 
安装 进度 
充 成 


添加 当前 用 户 (OQ | | 添加 (A | | 得 除 (R) 


Es |[ TM | | ww 二 


图 1-29 分 布 式 重播 控制 器 设置 


(17) 进行 分 布 式 重播 客户 端 设置 ， 如 图 1-30 所 示 ， 然 后 单 击 “下 一 步 ”按钮 。 
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【学 淮 蔽 商社 芒 泣 年 六 淮 仅 蕊 项 学 中 本 呈 夏 】 


【 兰 淮 广 并 福全 洪 岂 六 站 广 山 席 当中 本 喇 丰 】 
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人 指定 近 剂 器 计算 机 的 名称 和 目录 位 置 
功能 渤 择 控制 器 名 称 (QO: 
安装 规则 工作 目录 (W): |C:\Program Files (x86)\Microsoft SQL Server\DReplayClient\WorkingDiA\ | | ~» 
结果 目录 (R): 。 [C:\Program Files (x86)\Microsoft SQL Server\DReplayClient\ResukDir\ 本 


数据 库 引 革 配置 

Analysis Services 配置 
Reporting Services 配置 
分 布 式 重 揽 控 制 器 


< 上 一步 (B || 下 - 沙 ()> 取消 帮助 


图 1-30 “分 布 式 重播 客户 端 设置 
(18) 显示 错误 报告 ， 如 图 1-31 所 示 。 


错误 报告 
帮助 Microsoft 改进 SQL Server 功能 和 服务 . 
安装 得 序 支持 规则 揪 定 您 磊 望 生动 发 送 到 Microsoft 以 改进 SQL Server 未 来 版 本 的 信息 ， 这 些 设置 星 可 选 的 。Microsoft 
设置 角色 会 梅 该 信息 视 为 机 定 信息 。 Microsof 可 能 会 通过 Microsoft Update 提供 更 新 以 修改 功能 使 用 情况 数 
据 ， 根 据 您 的 -局 动 更 新 "设置 , 这 些 更 新 可 能 会 伍 动 下 载 并 安装 到 多 的 计算 机 上 . 
功能 选择 
安装 规则 
实例 配置 有 关 详 党 信息 ,请 参 网 Microsoft SQL Server 2012 隐私 声明 。 
磁盘 空间 要 求 加 这 有 关 Mi 和 号 动 重 新 的 重 多 信息 
服务 器 配置 


数据 库 引 地 配置 
Analysis Services 配置 
Reporting Services 配置 


口 将 Windows 和 SQL Server 错误 报告 发 送 到 Microsoft 或 您 公司 的 报 雪 服务器。 该 设置 仅 适用 于 以 
无 用 户 交互 方式 运行 的 服务 (W)。 


< 上 一 步 (B) | | 下 一 步 (N) > 取消 才 助 


图 1-31 “错误 报告 ”界面 
(19) 单 击 “ 下 一 步 ”按钮 ， 安 装配 置 规则 ， 如 图 1-32 所 示 。 


所 示 。 


所 示 。 


项 目 1 项 目 介绍 及 需求 分 析 沁 


安 美 程序 正在 运行 规则 以 兢 坪 星 否 要 咀 止 安装 过 程 。 有 关 详 纪 信息 ,清单 主 " 帮 助 。 


(20) 安装 规则 检测 通过 后 ， 单 击 “ 下 一 步 ”按钮 ， 显 示 “ 准 备 安装 ”界面 ， 如 图 1-33 


名作 完 成 。 已 通过 : 7。 和 失败 0。 警告 0. 已 况 过 0. 


未 过) >> 


| < 上 - 步 昌 || TsM>|| wh || wy 


1-32 ”安装 配置 规则 


准备 安装 
验证 要 安装 的 SQL Server 2012 功能 . 
已 准备 字 安 装 SQL Server 2012: 
已 扩 要 ~ 
版 本 类别 Enterprise 
报 作 : Install (产品 更 新 ) 到 


安装 但 序 支持 规则 
设置 角色 

功能 选择 

安装 规则 

实 人 配置 

磁盘 空间 要 求 
服务 器 配置 
数据 库 引 节 配合 
Analysis Services 配置 
Reporting Services 配置 
分 布 式 重 播 控制 器 

分 布 式 重 握 客 户 湛 
错误 报告 

安装 配置 规则 

准备 安装 

安装 进度 

硅 成 


Microsoft ,NET Framework 4.0 
Windows PowerShell 2.0 
Microsoft .NET Framework 3.5 
后 要 从 介 括 安 六 
Microsoft Visual Studio 2010 Shell 
Microsoft Visual Studio Tools for Applications 30 
请 和 规 配 于 
数据 库 引 李 服务 
SQL Server 复制 
全 文 和 下 义 提取 利索 
Data Quality Services 
Analysis Services v 
< 而 > 


配 半 文件 路 径 : 


CNProgram Files\Microsoft SQL Seve\110\Setup Bootstrap\Log\20120916_152553\Configuration| 


(21) 单 击 “ 安 装 ” 按 钮 ， 开 始 安装 SQL Server 2012 软件 ， 并 显示 安装 进度 ， 如 图 1-34 


< 上 - 沙 (B) 安 美 DD 到 漠 帮助 


图 1-33 “准备 安装 ”界面 


23 


【 尝 冰 位 商人 仿 江 年 六 淮 仅 蕊 项 学 中 二 呈 夏 】 


【学 隙 六 洪福 全 汶 由 总 玲 全 懂 项 光 站 本 叶 直 】 
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忆 动态 网 站 建设 案例 教程 (ASP.NET) 


地 er oe cviec maT 一 


功能 远 择 GenerateFeatureRequestForSlipstreamAction 


EL 


图 1-34 ”安装 进度 
(22) SQL Server 2012 安装 完成 后 ， 单 击 “ 下 一 步 ” 按 钮 ， 即 可 完成 安装 。 


任务 3 搭建 系统 架构 


进行 系统 构架 ， 是 指 对 已 确定 需求 的 技术 实现 构架 和 作 好 规划 ， 运 用 成 套 、 完 整 的 工 
具 ， 在 规划 的 步 又 下 去 完成 任务 。 
本 网 站 项 目 将 采用 三 层 架 构 进行 搭建 ， 因 此 本 任务 将 首先 来 认识 三 层 架 构 。 


相关 知识 
1.3.1 什么 是 三 层 架 构 


在 饭店 中 一 般 有 三 种 人 员 : 服务 员 、 厨 师 和 采购 员 。 他 们 分 别 担任 着 不 同 的 角色 ， 服 
务 员 主 要 负责 接待 顾客 和 提交 菜单 , 厨师 主要 负责 炒菜 和 交 菜 ,采购 员 主 要 负责 采购 食料 。 
他 们 各 司 其 职 ， 服 务 员 不 用 了 解 言 师 如 何 做 菜 ， 不 用 了 解 采购 员 如 何 采 购 食 材 ;， 厨师 不 用 
知道 服务 员 接 待 了 哪 位 客人 ， 不 用 知道 采购 员 如 何 采购 食材 ， 同 样 ， 采 购 员 不 用 知道 服务 
员 接待 了 哪 位 客人 ， 不 用 知道 厨师 如 何 做 菜 。 

顾客 直接 和 服务 员 打 交道 。 当 顾客 和 服务 员 说 “我 要 一 个 炒 茄子 ”时 ， 由 于 服务 员 不 
负责 炒菜 ， 所 以 她 会 把 请 求 往 上 递交 ， 传 递 给 厨师 。 厨 师 接 到 菜单 后 ， 看 到 需要 茄子 ， 也 
会 把 请 求 往 上 递交 ， 传 递 给 采购 员 ， 由 采购 员 从 仓库 里 取 来 茄子 传 回 给 厨师 。 厨 师 做 好 炒 
茄子 后 ， 又 传 回 给 服务 员 ， 由 服务 员 把 茄子 端 给 顾客 。 这 样 ， 就 快速 而 高 效 地 完成 了 一 个 
完整 的 任务 操作 。 


项 目 1 项目 介 绍 及 需求 分 析 沁 


这 里 ， 服 务 员 、 厨 师 和 采购 员 代表 着 三 种 不 同 的 层次 ， 面 对 和 处 理 的 是 不 同 的 问题 。 
“服务 员 ” 层 不 处 理 任何 问题 ， 只 负责 接洽 顾客 ， 并 对 顾客 的 需求 进行 上 传 下 达 。“ 厨 师 ” 
层 接 到 顾客 任务 后 ， 负 责任 务 的 具体 实施 ， 但 实施 前 需要 调用 “采购 员 ” 层 ， 让 其 为 任务 
准备 原材料 。 可 见 ， 通 过 这 样 三 个 层次 的 设计 ， 复 杂 的 任务 将 会 变 得 非常 简单 ， 解 决 起 来 
也 非常 高 效 。 

在 软件 开发 中 ， 为 了 提高 效率 ， 也 有 类 似 的 三 层 架构 设计 。 其 中 ，“ 服 务 员 ” 层 就 类 
似 于 用 户 表 示 层 ，“ 厨 师 ” 层 就 类 似 于 业务 逻辑 层 ，“ 采 购 员 ” 层 类 似 于 数据 访问 层 ， 它 
们 的 类 比 关 系 如 图 1-35 所 示 。 


饭店 


用 户 表示 层 “一 >| 业务 逻辑 层 | > | 数据 访问 层 


图 1-35 饭店 中 的 三 种 角色 与 软件 系统 的 三 层 架 构 
1.3.2 理解 三 层 架 构 


通常 意义 上 的 三 层 架 构 (3-tier architecture)， 指 的 是 将 整个 业务 应 用 划分 为 三 个 层次 : 
用 户 表 示 层 (USL)、 业 务 逻 辑 层 (BLL) 和 数据 访问 层 (DAL)。 其 中 ， 各 层 的 功能 和 作 
用 如 下 所 述 。 

1. 用 户 表示 层 ( USL ) 

用 户 表 示 层 (User Show Layer) 负责 处 理 用 户 的 输入 信息 和 向 用 户 输出 信息 ， 但 并 不 
负责 解释 其 含义 。 出 于 效率 考虑 ， 该 层 在 向 业务 逻辑 层 传递 输入 信息 之 前 ， 有 时 会 进行 合 
法 性 验证 。 用 户 表示 层 通常 采用 前 端 工具 进行 开发 。 

通俗 地 讲 ， 用 户 表示 层 就 是 展现 给 用 户 的 界面 ， 即 用 户 在 使 用 一 个 系统 时 的 所 见 即 所 
得 。 用 户 表 示 层 不 处 理 用 户 提出 的 任何 要 求 ， 但 可 对 用 户 的 任务 要 求 进行 “上 传 下 达 ”。 

2. 业务 逻辑 层 (BLL ) 

业务 逻辑 层 (Business Logic Layer) 负责 用 户 问题 的 具体 解决 。 在 接受 了 用 户 表示 层 
传 来 的 用 户 问题 后 ， 针 对 具体 问题 进行 操作 (所 需 数据 需要 由 数据 访问 层 提供 )。 

业务 逻辑 层 是 数据 访问 层 和 用 户 表示 层 之 间 的 纽带 ， 用 于 建立 实际 的 数据 库 连接 ， 可 
根据 用 户 的 请 求生 成 检索 语句 或 更 新 数据 库 ， 并 会 把 结果 返回 给 前 端 界面 显示 。 

3. 数据 访问 层 (DAL ) 


数据 访问 层 (Data Access Layer) 主要 负责 实际 数据 的 存储 和 检索 ， 该 层 在 接受 了 来 自 
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【 兰 淮 芝 黄 福 ， 仿 泣 由 六 下 人 下 懂 席 区 中 本 员 直 】 


【学 东 芒 洪福 全 汶 由 总 玲 人 玉民 天 兴 站 本 叶 二】 


这 动态 网 站 建设 案例 教程 (ASP.NET) 


业务 逻辑 层 的 数据 请 求 后 ， 对 数据 库 进 行 具体 的 增 、 删 、 改 、 查 等 操作 。 
软件 项 目 开 发 中 ， 区 分 层次 的 目的 是 为 了 实现 高 内 聚 、 低 耦合 ， 使 得 软件 开发 的 效率 
更 高 。 
三 层 架 构 中 ， 各 层 的 详细 功能 如 图 1-36 所 示 。 


才 示 层 的 主要 职责 就 是 为 用 户 提供 信息 ， 并 翻译 

用 户 | ! 用 户 的 指令 。 

表示 | 1 @ 。 界面 外 观 层 :提供 与 用 户 交互 的 界面 。 

县 | ®@ 界面 规 则 层 : 根据 指令 调用 业务 接口 层 相应 
i 接口 ， 并 将 数据 传递 为 业务 层 。 
[二 二 二 二 二 - 
。 | 业务 逻辑 层 主要 对 用 户 提交 的 指令 和 数据 进行 校 
1 | 业务 接口 层 | 1 | 验 ， 再 加 工 后 将 其 存储 到 数据 库 中 ;或 提取 部 据 
1 1 序 中 的 数据。 返回 给 表示 层 

业务 | 1 1 业务 接口 层 : 提供 给 表示 层 指令 接口 ， 并 将 

逻辑 | | | 业务 规划 层 i 指令 操作 结果 返回 。 

层 |i ， “| 业务 规则 层 : 根 壳 指 令 和 数据 的 不 同 ， 将 指 
1 令 划分 给 不 同 的 构造 器 处 理 , 并 构造 出 实体 
1 | | @ 实体 层 : 拍 象 出 的 数据 库 对 象 ， 如 玫 实 体 、 
Je 汪 视图 实体 、 存 储 过 程 实体 等。 

数据 | 1 i 数据 访问 层 用 于 具体 撕 作 数据 库 ， 如 连接 、 硒 询 

i gy i 问 层 过 ， 如 连接 、 查 询 、 

人 | 数据 访问 层 | 插入 、 更 新 、 删 除 等 。 


图 1.36 三 层 架 构 中 各 层 的 详细 功能 
任务 实施 


本 项 目 网 站 采用 B/S 结构 ， 主 要 板块 包括 公司 介绍 、 新 闻 中 心 、 产 品 信 息 、 服 务 与 支 
持 、 招 贤 纳 士 、 联 系 我 们 等 。 

为 了 开发 该 网 站 ， 实 现 三 层 结构 ， 在 Visual Studio 2010 中 需要 创建 如 图 1-37 所 示 的 项 目 
工程 结构 。 其 中 ，App_Code 目录 下 的 BLL 目录 是 业务 逻辑 层 对 应 的 代码 文件 ，DAL 目录 和 
Model 目录 是 数据 访问 层 对 应 的 代码 文件 ， 其 他 .aspx 文件 则 是 用 户 表示 层 对 应 的 代码 文件 。 


部 cv \webcompany\ 
加 Admin 
4 BB AppCode 
BLL 
a commcode 
a DAL 
回 Model 
各 bin 
加 DataBase 
Ga Images 
a login 
a Scripts 
各 安 壬 澡 明 
Indexaspx 
加 Indexhtml 
固 fisthtml 
国 fist2html 
国 NewsUistaspx 
下 Web.config 


图 1-37 项 目 工程 结构 图 


项 目 1 项目 介 绍 及 需求 分 析 总 


项 目 总 结 


在 本 项 目 中 ， 主 要 介绍 了 项 目 需 求 、 开 发 环境 、 系 统 架 构 等 ， 最 后 以 生活 


引入 ， 介 绍 了 三 层 结构 以 及 每 一 层 的 功能 。 
拓展 训练 


1. 描述 用 ASPNET 开发 网 站 需要 做 的 准备 工作 。 
2. 描述 三 层 结构 的 工作 原理 。 


FP 的 例子 为 
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【 涯 难 六 洪福 仿 当 点 问 玛 臣 沁 席 半 加 加 3】 


2 


主页 设计 


项 目 5 引 入 


一 个 成 功 的 网 站 ， 必 须 能 够 引起 访问 者 的 注意 ， 使 浏览 者 在 访问 之 余 产生 视觉 上 的 愉 
悦 感 。 因 此 ， 在 进行 网 页 创作 时 必须 将 网 站 的 整体 设计 与 网 页 设计 的 相关 原理 结合 起 来 。 

网 站 设计 的 过 程 ， 就 是 将 策划 案 中 的 内 容 、 网 站 的 主题 模式 以 及 个 人 的 认识 ， 通 过 艺 
术 手 法 表现 出 来 的 过 程 ; 而 网 页 制作 的 过 程 ， 则 是 按照 W3C 规范 ， 用 HTML 语言 ( 标准 
通用 标记 语言 下 的 一 个 应 用 ) 将 网 页 设计 稿 制 作成 网 页 格式 文档 的 过 程 。 

本 项 目 中 ,皮具 公司 网 站 主页 可 被 分 为 头 部 、 中 间 、 底 部 三 大 部 分 。 由 于 中 间 部 分 内 
容 较 多 ， 又 把 它 分 为 上 、 中 、 下 三 部 分 。 主 页 的 显示 效果 如 图 2-1 所 示 。 


上 布 了 
上 市 
上 
上 市 了 
上 市 
上 


上 市 
上 
上 市 
上 市 了 


图 2-1 主页 效果 


项 目 2 主页 设计 如 


项 目 分 解 


在 本 项 目 中 ， 通 过 完成 以 下 3 个 任务 ， 来 掌握 网 站 中 页 面 设计 的 方法 和 技巧 。 
任务 1 主页 整体 布局 

任务 2 导航 菜单 的 制作 

任务 3 中间 部 分 的 设计 


任务 1 主页 整体 布局 


网 站 首页 关乎 着 用 户 对 网 站 的 第 一 印象 ， 可 谓 非常 重要 。 

网 站 首页 的 布局 可 从 主题 、 导 航 、 内 容 等 方面 入 手 。 主 题 可 帮助 用 户 快 速 了 解 网 站 的 
性 质 ， 确 定 网 站 是 做 什么 的 。 主 题 多 体现 在 网 站 标题 、 关 键 词 的 描述 上 ， 尤 其 是 标题 ， 这 
是 因为 用 户 在 搜索 引擎 上 看 到 的 搜索 结果 就 是 网 站 的 标题 与 描述 内 容 。 首 页 主题 还 体现 在 
Logo 上 。 准 确 概括 的 网 站 主题 可 以 帮助 用 户 更 好 地 界定 网 站 ， 以 及 更 好 地 宣传 推广 自己 。 

网 站 导航 可 以 看 做 是 对 网 站 内 容 的 分 类 。 对 网 站 的 内 容 进 行 细 分 后 ， 用 户 可 根据 需要 
快速 找到 并 浏览 自己 需要 的 栏目 和 页 面 ， 增 加 体验 度 和 好 感 。 因 此 ， 网 站 首页 的 导航 必须 
做 到 分 类 清晰 ， 各 栏目 之 间 不 能 重复 。 

设置 好 页 面 导 航 之 后 ， 就 可 以 对 页 面 内 容 进行 布局 了 。 首 先 要 先 对 网 站 的 用 户 群 体 进 
行 需 求 分 析 ， 把 用 户 最 关注 的 内 容 放 在 首页 最 重要 的 位 置 。 一 般 情况 下 ， 要 根据 用 户 的 关 
注 度 和 浏览 习惯 ,按照 页 面 内 容 的 重要 程度 ， 由 左上 到 右 下 来 进行 内 容 布 置 。 也 就 是 说 
最 重要 的 内 容 要 放置 在 首页 左上 位 置 , 而 广告 或 不 太 重 要 的 内 容 可 放置 在 页 面 的 右 下 位 置 。 

除 此 之 外 ， 还 需 注 意 合理 安排 页 面 的 呈现 尺寸 ， 综 合 考虑 网 站 的 下 载 及 打开 速度 ， 以 
及 友情 链接 的 合理 布置 等 。 


相关 知识 
2.1.1 网 页 布局 概述 


在 网 页 设计 中 ， 网 页 布局 的 效果 会 直接 影响 到 网 页 设计 的 质量 。 

在 搭建 网 站 过 程 中 ， 色 彩 搭配 、 文 字 变 化 、 图 片 处 理 等 ， 都 是 影响 一 个 网 页 美观 与 否 
的 重要 元 素 。 除 此 之 外 ， 还 有 一 个 非常 重要 的 因素 ， 就 是 网 页 的 布局 。 不 同类 型 的 网 站 采 
用 不 同 的 布局 ， 不 但 能 使 网 站 结构 更 合理 化 ， 也 可 以 使 访问 者 一 看 就 明白 这 个 网 站 是 做 什 
么 的 。 

目前 ， 网 站 中 常见 的 页 面 布局 方式 有 两 种 : 表格 布局 方式 和 CSS+DIV 布局 方式 。 

1. 表格 布局 


表格 是 一 种 简明 、 扼 要 且 内 容 丰 富 的 组 织 和 显示 信息 的 方式 ， 在 文档 处 理 中 占有 十 分 
重要 的 位 置 。 使 用 表格 既 可 以 在 页 面 上 显示 表格 式 数 据 ， 也 可 以 进行 文本 和 图 形 的 布局 。 
表格 布局 方式 简单 、 灵 活 ， 是 最 早 也 是 目前 应 用 最 广泛 的 网 页 布局 技术 。 通 过 使 用 相 
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【 兰 尖 位 洪福 六 泣 由 六 淮 文 册 席 当中 可 呈 丰 】 
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关 的 表格 标签 ， 如 table、th、tr、td、caption 、thread 、tfoot、tbody、col 等 ， 以 及 对 表格 单 
元 格 进行 合并 或 拆 分 、 在 表格 中 嵌 套 表格 等 操作 ， 可 以 得 到 各 种 需要 的 页 面 布局 效果 。 
表格 布局 的 优势 在 于 它 能 对 不 同 对 象 进行 处 理 ， 而 又 不 用 担心 各 对 象 之 间 的 影响 ， 而 
且 在 定位 图 片 和 文本 时 非常 方便 。 但 当 使 用 的 表格 过 多 时 ， 页 面 下 载 速 度 将 会 受到 影响 
另外 ， 表 格 布局 方式 的 灵活 性 较 差 ， 不 易于 进行 修改 和 扩展 。 
2.CSS+DIV 布局 


CSS+DIV 是 网 站 标准 (或 称 Web 标准 ) 中 的 常用 术语 之 一 。 在 XHTML 网 站 设计 标 
准 中 ， 不 再 使 用 表格 定位 技术 ， 而 是 采用 CSS+DIV 方式 来 实现 各 种 定位 。 

DIV 是 html 标记 集中 的 标记 ， 主 要 用 来 为 html 文档 内 的 大 块 内 容 提供 布局 结构 和 背 
景 。 可 以 将 DIV 理解 为 “ 层 ” 的 概念 。 

CSS 是 一 种 格式 化 网 页 的 标准 方式 ， 在 网 页 中 使 用 CSS 技术 ， 不 仅 可 以 控制 大 多 数 传 
统 的 文本 格式 ， 还 可 以 有 效 地 对 页 面 的 布局 、 颜 色 、 背 景 和 其 他 效果 实现 精确 的 控制 。 

利用 CSS+DIV 方式 来 进行 网 页 布局 ， 其 实 就 是 用 DIV 盒 模型 结构 把 各 部 分 内 容 划分 
到 不 同 的 区 块 ， 然 后 用 CSS 来 定义 盒 模型 的 位 置 、 大 小 、 边 框 内 、 外 边 距 排列 方式 等 。 简 
单 地 说 ，DIV 用 来 搭建 网 站 框架 结构 ，CSS 用 于 美化 网 站 表现 样式 。 

CSS+DIV 布局 方式 中 ， 只 要 对 相应 的 CSS 代码 进行 简单 的 修改 ， 就 可 以 改变 同一 页 
面 中 不 同 部 分 的 效果 ， 或 者 不 同 页 面 中 网 页 的 外 观 和 格式 。 剥 离 了 CSS 后 ， 页 面 将 会 只 剩 
下 内 容 部 分 ， 所 有 修饰 部 分 〈 包 括 背 景 、 字 体 样式 、 高 度 等 ) 都 消失 了 。 

使 用 CSS+DIV 布局 需要 编写 大 量 CSS 样式 代码 ， 以 控制 各 布局 的 DIV 层 。 因 此 ， 掌 
握 它 相对 表格 布局 会 困难 一 些 。 但 CSS+DIV 布局 较 表 格 布局 更 加 灵活 、 实 用 ， 网 站 布局 后 
很 容易 就 能 调整 网 站 的 布局 结构 ， 而 且 ，CSS+DIV 布局 的 各 布局 DIV 层 可 以 依次 下 载 显 
示 ， 因 此 其 访问 速度 较 表 格 布局 要 快 很 多 。 


2.1.2 CSS 语法 基础 


CSS 的 中 文 名 称 是 层 县 样式 表 (Cascading Style Sheets) ， 它 是 一 种 标记 语言 ， 不 需要 
进行 编译 便 可 以 直接 由 浏览 器 执行 。 样 式 通常 存储 在 样式 表 中 , 外 部 样式 表 通 常 存储 在 CSS 
文件 中 。 通 过 调用 外 部 样式 表 ， 可 以 极 大 地 提高 网 页 设计 的 效率 。 

1. CSS 的 基本 语法 格式 

通常 情况 下 ，CSS 的 语法 包括 3 个 方面 : 选择 器 、 属 性 、 值 。 其 写法 如 下 所 示 。 

选择 器 { 属性 :属性 值 ; } 

例如 : 

p{color:#ff£0000; background:#000000;} 

其 中 ，p 为 选择 器 ， 指 明了 下 面 是 在 给 p 定义 样式 ， 样式 声明 写 在 一 对 大 括号 “{}” 
中 ; color 和 background 称 为 “属性 ”， 不 同属 性 之 间 用 “;” 分 阳 ，#ff0000 和 #000000 是 
属性 的 值 。 


项 目 2 主页 设计 如 


(1) 选择 器 

选择 器 中 常用 的 是 通 配 选 择 器 、 类 型 选择 器 、 包 含 选择 器 、ID 选择 器 、 类 选择 器 。 

Q@ 通 配 选 择 器 

通 配 选择 器 的 写法 是 *， 含 义 就 是 所 有 元 素 。 例 如 : 

* {font-size:12px;} 

这 里 ，font-size 属性 表示 字体 大 小 ，px 是 像素 。 该 样式 实现 的 效果 是 : 页 面 中 所 有 文 
本 的 字体 大 小 为 12px。 

@ 类 型 选择 器 

类 型 选择 器 就 是 以 文档 语言 对 象 类 型 作为 选择 器 , 即使 用 结构 中 元 素 名 称 作为 选择 器 ， 
如 body、div、p 等 。 例 如 : 

div {font-size:12px;} 

该 样式 实现 的 效果 是 : 页 面 中 所 有 div 元 素 包含 内 容 的 字体 大 小 为 12px。 注 意 ， 所 有 
的 页 面 元 素 都 可 以 作为 类 型 选择 器 。 

@ 包含 选择 器 

包含 选择 器 的 语法 格式 为 “选择 器 1 选择 器 2”， 两 个 选择 器 之 间 用 空格 分 隔 ， 含 义 
是 所 有 选择 器 1 中 所 包含 的 选择 器 2。 例 如 : 

div p{font-size:12px} 

该 样式 实现 的 效果 是 : 所 有 被 div 元 素 包含 的 p 元 素 中 ， 文 本 的 字体 大 小 为 12px。 

可 以 使 用 包含 选择 器 给 一 个 元 素 内 的 子 元 素 定义 样式 。 例 如 : 


ul li{font-weight:bold;} // 定 义 ul 内 1i 标签 的 样式 
p span a{font-weight:bold;} // 定 义 段落 下 a 标签 的 样式 
@ ID 选择 器 


ID 选择 器 的 语法 格式 是 天 0 上 自 定义 的 ID 名 称 。 例 如 : 

#name{font-size:12px;} 

该 样式 实现 的 效果 是 : 所 有 调用 ID 名 称 为 name 的 页 面 元 素 中 ， 文 本 的 字体 大 小 为 
12px。 

ID 选择 器 的 名 称 在 页 面 中 是 唯一 的 。 如 果 在 页 面 中 定义 了 ID 选择 器 的 名 字 为 name， 
则 页 面 中 其 他 ID 选择 器 的 名 称 不 能 定义 为 name。 

@ 类 选择 器 

类 选择 器 的 语法 格式 是 “.” 加 上 自 定义 的 类 名 称 。 例 如 : 

.Center{text-align:center;} 

该 样式 实现 的 效果 是 ， 在 所 有 调用 类 名 称 为 center 的 元 素 中 ， 文 本 居中 排列 。 

类 选择 器 的 名 称 在 页 面 中 不 是 唯一 的 ， 可 以 通过 定义 相同 的 类 名 来 调用 同一 个 样式 。 
注意 ， 类 名 的 第 一 个 字符 不 能 使 用 数字 。 

@ 选择 器 分 组 

可 以 对 选择 器 进行 分 组 ， 这 样 ， 被 分 组 的 选择 器 就 可 以 分 享 相同 的 声明 ， 从 而 有 助 于 
优化 样式 表 ， 提 高 效率 。 通 常 是 用 喜 号 将 需要 分 组 的 选择 器 分 开 。 
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【学 蒸 六 洪福 全 汶 由 总 玲 全 懂 民 沼 本 叶 可】 
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例如 : 


hl{color:green;} 
h2{color:green;} 
h3{color:green;} 


分 组 后 ， 代 码 可 以 优化 为 : 
hl,h2,h3 {color: green;} 
(2) 属性 和 值 
属性 是 CSS 中 最 重要 也 最 复杂 的 部 分 ,常用 的 属性 有 字体 属性 (font)、 文 本 属性 (text)、 
背景 属性 (background) 、 定 位 属性 (position) 、 浮 动 属性 (float) 、 边 界 属性 (margin) 、 
边框 属性 (border) 、 补 白 属性 〈padding) 、 列 表 项 目 属性 〈list) 、 表 格 属性 〈table) 等 。 

根据 CSS 规则 ， 子 元 素 将 从 父 元 素 继 承 属 性 。 例 如 : 

body {font-family:Verdana, sans-serif;} 

上 述 代 码 中 ，body 元 素 使 用 了 Verdana 字体 。 通 过 CSS 继承 ， 子 元 素 将 继承 body 的 
所 有 属性 ， 如 p、td、ul、ol、1li、dl、dt、dd 等 。 

不 妨 思考 一 下 : 如 果 不 希 望 “Verdana，sans-serif” 字 体 被 所 有 的 子 元素 继 承 ， 例 如 和 希 
望 段 落 的 字体 是 Times， 又 该 怎么 做 呢 ? 代码 可 以 这 样 写 : 

p {font-family:Times, "Times New Roman", serif;} 

属性 和 值 的 知识 是 CSS 应 用 的 主体 部 分 ， 将 在 以 后 的 应 用 中 逐一 进行 介绍 。 

2. CSS 的 命名 规范 


制作 网 页 时 , 会 用 到 大 量 的 自 定义 类 选择 符 和 ID 选择 符 。 该 如 何 有 效 地 命名 这 些 选 择 
符 呢 ? 

通常 根据 页 面 中 模块 的 功能 进行 语义 化 命名 。 例 如 ， 页 面 头 部 使 用 header， 导 航 栏 使 
用 nav， 主 体 使 用 main， 侧 边栏 使 用 sidebar， 底 部 使 用 footer， 新 闻 列 表 使 用 newsList 等 。 
这 样 ， 整 个 页 面 看 起 来 就 很 清晰 ， 维 护 起 来 也 比较 方便 。 

部 分 内 容 的 习惯 命名 方法 参见 表 2-1。 


表 2-1 部 分 习惯 的 命名 方法 


模块 推荐 命名 


主导 航 mainnav leftsidebar 
子 导 航 Subnav 1 侧 栏 rightsidebar 
页 脚 footet 水 志 、 logo 

内 容 content $ banner 

头 部 header 法 submenu 
底部 footer 注 note 

商标 label 容 container 
标题 search 

顶 导航 topnav 司 login 

侧 栏 sidebar 


项 目 2 主页 设计 如 
命名 方法 有 两 种 : 结构 化 命名 方式 和 语义 化 命名 方式 。 两 者 的 具体 差别 如 图 2-2 所 示 。 


结构 化 方式 语义 化 方式 


left-content main 
right-content main 
和 -J 


图 2-2 ”两 种 命名 方式 比较 


因为 页 面 中 的 细节 内 容 不 同 ， 所 以 没有 适合 所 有 页 面 的 详细 命名 规范 。 不 同 的 开发 团 
队 也 可 能 有 自己 的 命名 规则 。 总 之 ， 命 名 只 要 合乎 Web 标准 中 “结构 和 表现 相 分 离 ” 的 思 
想 ， 做 到 合理 易 用 就 可 以 。 


3. CSS 的 调用 


当 一 个 html 元 素 被 不 止 一 个 样式 定义 时 ， 会 优先 使 用 哪 种 样式 呢 ? 这 涉及 不 同样 式 
定义 之 间 的 优先 级 问题 。 
CSS 中 ， 元 素 可 使 用 或 调用 的 样式 通常 包括 如 下 4 种 : 
党 ”浏览 器 的 默认 样式 。 
% ”内 联 样式 ， 即 元 素 中 直接 编写 的 样式 代码 ， 通 常 位 于 <style> 标 签 内 。 
党 ”内 部 样式 表 : 即将 样式 代码 写 在 页 面 头 部 〈 通 常 位 于 <head> 标 签 内 部 ) ， 然 后 在 页 
面 中 进行 调用 。 
党 ”外 部 样式 表 : 即将 样式 代码 写 在 独立 的 .css 文 件 中 , 然后 在 页 面 中 通过 链接 或 引用 
的 形式 进行 调用 。 
其 中 ， 内 联 样 式 拥 有 最 高 的 优先 级 。 
示例 1: 内 联 样 式 的 应 用 。 


<div style="width:400px; height:100px; background-color:#cccccc;font-size:18px;"> 
这 是 一 个 在 元 素 中 直接 使 用 样式 的 示例 。</div> 


该 样式 中 , 定义 了 元 素 宽度 为 400px, 高 为 100px, 背景 颜色 为 浅 灰 色 , 字体 大 小 为 18px。 
其 显示 效果 如 图 2-3 所 示 。 


这 是 一 个 在 元 素 中 直接 使 用 样式 的 示例 。 


图 2-3 ”元素 中 直接 使 用 样式 的 显示 效果 
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【 尝 葵 车 灌 守 六 漳 点 茵 给 臣 沿 讽 半 加 加 BY】 
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示例 2: 内 部 样式 表 及 其 调用 。 


<head> <!-- 页 面 头 部 内 容 开始 --> 
<title> 头 部 调用 样式 </title> 
<style> <!-- 定 义 CSS 样 式 --> 
.content{ 

width:400px; 


height:100px; 
Color:#ffffff; 
background:#333333;} 
</style> 
</head> <!-- 页 面 头 部 内 容 结束 --> 


<body class="body"> 
<div class="content"> 这 是 一 个 页 面 头 部 调用 样式 的 示例 。</div> <!-- 调 用 CSS 样 式 --> 
</body> 


使 用 内 联 样式 时 ， 在 头 部 编写 样式 代码 ， 在 页 面 中 必须 有 相应 的 调用 代码 。 示 例 2 中 
页 面 的 显示 效果 如 图 2-4 所 示 。 


图 2-4 元 素 调用 头 部 样式 的 显示 效果 
示例 3: 外 部 样式 表 及 其 调用 。 
在 一 些 大 型 项 目 中 ， 由 于 样式 表 文 件 很 多 ， 使 用 桥接 样式 表 的 方式 可 以 更 便捷 、 高 效 
地 管理 这 些 样 式 。 桥 接 样 式 表 的 调用 原理 如 图 2-5 所 示 。 


图 2-5 桥接 样式 表 


桥接 外 部 样式 表 的 语法 格式 为 ; 
@import url(color.css) 
@import url(type.css); 


注意 ， 引 用 的 样式 表 必 须 出 现在 其 他 规则 之 前 ， 也 就 是 说 ，@import 必须 出 现在 任何 
常规 样式 表 规则 之 前 ， 可 以 在 <style> 标 签 或 外 部 样式 表 中 ， 和 否则 会 被 忽略 。 只 有 这 样 才能 
保证 正常 的 效果 。 


4. 编写 高 效 的 CSS 
@ 使 用 外 联 样式 表 代 蔡 内 联 样式 和 内 部 样式 表 。 


项 目 2 主页 设计 如 


不 推荐 使 用 : 

<p style="color:red"></p> 

或 者 是 : 

<style type="text/css"> p{color:red;}</style> 
@ 使 用 组 选择 器 。 

推荐 使 用 : 
hl,h2,h3 {color:green;} 

@ 使 用 继承 。 

不 推荐 使 用 : 

td{font-size:12px;} p{font-size:12px;} li{font-size:12px;}... 
应 该 这 样 写 : 

body{font-size:12px;} 

@ 使 用 简 记 属 性 。 

不 推荐 使 用 : 

margin-top:lpx; margin-left:2px; margin-right:3px; margin-bottom: 4px; 
应 该 这 样 写 : 


margin:1lpx 3px 4px 2px; 
2.1.3 认识 CSS 盒 模型 


在 CSS 中， 所 有 的 文档 元 素 都 会 生成 一 个 矩形 框 ， 称 这 个 矩形 框 为 一 个 盒子 ， 所 有 的 
页 面 布局 都 是 围绕 CSS 盒 模型 进行 的 。 
1. 认识 CSS 金子 模型 


元 素 生 成 的 矩形 框 通常 由 以 下 几 部 分 组 成 : 边界 、 边 框 、 补 白 、 宽 度 和 高 度 ， 如 图 2-6 
所 示 。 

内 容 只 能 出 现在 盒 模型 中 标 有 高 度 和 宽度 的 部 分 。 也 就 是 说 ， 除 高 度 和 宽度 所 包含 的 
区 域 以 外 ， 盒 模型 其 他 部 分 是 没有 内 容 的 空白 区 域 ， 将 显示 元 素 本 身 的 背景 或 包含 元 素 的 
父 元 素 的 背景 。 

当 内 容 部 分 大 于 定义 的 容器 空间 时 ， 内 容 的 显示 顺序 是 从 左 向 右 显 示 。 当 内 容 超出 定 
义 的 容器 宽度 时 ， 会 自动 换行 显示 。 

CSS 盒 模 型 是 进行 网 页 布局 时 必须 用 到 的 ， 最 常用 的 属性 是 margin 和 padding。 其 中 ， 
margin 表示 边界 , 又 称 为 外 边 距 ; padding 表示 边框 , 又 称 为 内 边 距 。 它们 分 别 有 top (上 ) 、 
bottom (下 ) 、left ( 左 ) 、right ( 右 ) 4 个 属性 。 

假设 一 个 元 素 框 有 10px 的 外 边 距 和 5px 的 内 边 距 ， 如 果 该 元 素 框 的 总 宽度 为 100px， 
则 应 设置 其 内 容 区 域 的 宽度 为 70px。 代 码 如 下 : 
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#box {width:70px; margin:10px; padding:S5px;} 
hl {margin:10px Opx 15px Spx;} 


向 依次 进行 设置 。 上 述 代 码 对 应 的 CSS 盒子 模型 如 图 2-7 所 示 。 


注意 ，top、bottom、left、right 4 个 属性 的 设置 顺序 为 上 、 右 、 下 、 左 ， 即 沿 顺 时 针 方 


图 2-6 盒 模型 示意 图 


2.CSS 外 边 距 合并 


图 2-7 CSS 盒子 模型 


当 两 个 CSS 盒子 靠近 时 ， 会 发 生 什么 事 儿 呢 ? 会 发 生 外 边 距 合 并 。 
例如 ， 当 两 个 垂直 外 边 距 相遇 时 ， 将 形成 一 个 外 边 距 ， 且 合并 后 的 外 边 距 高 度 等 于 两 


个 发 生 合并 的 外 边 距 中 的 高 度 较 大 者 ， 如 图 2-8 所 示 。 


合并 之 前 


内 容 区 域 


| 
| 
| 
内 容 区 域 | 
| 
| 
| 
| 


图 2-8 合并 前 后 (1) 


当 一 个 元 素 包含 在 另 一 个 元 素 中 时 《假设 没有 内 边 距 或 边框 把 外 边 距 分 隔 开 ) ， 


的 上 和 /或 下 外 边 距 也 会 发 生 合并 ， 如 图 2-9 所 示 。 


| 

| 

| 

| 

| 

| 

| 

| 

| margin-bottom :20px 
上 一 一 一 一 一 一 一 一 一 一 二 | a 叫 上 
| 

| 

| 

| 

| 

| 

| 
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| 
| 
| 
内 容 区 域 | 
| 
| 
| 
| 
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1 | width:70px 1 
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它们 


项 目 2 主页 设计 如 


合并 之 前 合并 之 后 

| | a | 
margin-bottom :20px 外 边 距 合并 四 | margin-bottom:20px | 
形成 一 个 外 边 距 ”| 一 | 
margin-top: 10px | I 1 内 容 区 域 | | 
| | 

| 
| 

| 


了 1 
| 

有 内 容 区 域 
| 


图 2-9 合并 前 后 (2) 
2.1.4 页 面 元 素 的 定位 和 浮动 


CSS 中 ， 页 面 元 素 的 定位 方式 通常 有 两 种 : 一 是 采用 浮动 的 定位 方式 ， 二 是 使 用 定位 
属性 。 制 作 页 面 时 ， 通 常会 混合 使 用 两 种 定位 方式 。 当 然 ， 元 素 位 置 的 精确 控制 还 需要 使 
用 其 他 CSS 属性 。 

1. 块 级 元 素 和 行内 元 素 


首先 来 看 下 页 面 中 元 素 的 默认 定位 方式 是 怎么 样 的 ， 即 在 不 使 用 任何 定位 属性 时 ， 页 
面 元 素 的 排列 方式 是 什么 。 

页 面 中 的 元 素 分 为 两 类 : 块 级 元 素 和 行内 元 素 。 

所 谓 行内 元 素 ， 就 是 必须 写 在 一 行内 的 元 素 ， 如 a、span、strong 等 。 在 没有 任何 布局 
属性 作用 时 ， 行 内 元 素 的 默认 排列 方式 是 同行 排列 ， 直 到 宽度 超出 包含 它 的 容器 宽度 时 ， 
才 自 动 换行 。 

块 级 元 素 就 是 div、body、ul、p、hl 等 这 样 的 元 素 ， 可 以 将 其 理解 为 一 个 四 方块 ， 其 
中 可 以 包含 其 他 块 级 元 素 和 行内 元 素 。 在 没有 任何 布局 属性 作用 时 ， 其 默认 排列 方式 是 换 
行 排列 ， 即 每 个 块 级 元 素 都 必须 从 新 的 一 行 开 始 。 例 如 : 

.divli /* 定 义 块 元 素 div1*/ 

width:200px; 
height:30px; 
background-color:#666666;} 

.div21 /* 定 义 块 元 素 div2*/ 

width:100px; 

height:30px; 
background-color:#000000; 
Color:#ffffff;} 


<div class="div1"> 第 一 个 块 元 素 </div> 

<div class="div2"> 第 二 个 块 元素 </div> 

这 里 ，divl 中 定义 的 样式 属性 是 : 宽 200px， 高 30px， 背 景 为 #666666 (灰色 ) 。div2 
中 定义 的 样式 属性 是 : 宽 100px， 高 30px， 背 景 为 #000000〈 黑 色 ) ， 文 本 颜色 为 #ffffFF ( 
色 ) 。 该 样式 的 网 页 效果 如 图 2-10 所 示 。 

可 见 ， 块 元 素 在 没有 设置 任何 布局 属性 时 ， 总 是 另 起 一 行 ， 并 且 以 左 侧 对 齐 的 方式 排 
列 下 来 。 这 一 点 很 像 传统 布局 中 的 table 元 素 。 可 以 利用 该 特性 对 不 同 块 进 行 排列 ， 也 可 以 
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给 块 级 元 素 加 上 浮动 等 属性 ， 使 其 不 是 总 从 新 的 一 行 开 始 ， 从 而 形成 不 同 的 网 页 布局 。 


图 2-10” 块 元 素 的 默认 定位 
在 网 页 布局 中 ， 通 常 使 用 块 级 元 素 进行 版 面 的 搭建 ， 使 用 行内 元 素 对 块 级 元 素 里 面 的 
内 容 进行 修饰 。 例 如 : 
<div>ab<span>c</span>defg</div> 
这 里 ，div 为 块 级 元 素 ，span 为 行内 元 素 。 
2. 页 面 元 素 的 定位 


网 页 布局 中 , 要 进行 元 素 定位 , 涉及 三 方面 的 内 容 : 定位 模式 (position), 边 偏 移 (top、 
right、bottom、left) ， 层 县 定位 元 素 (z-index) 。 

定位 模式 即 position 属性 ， 常 用 的 取 值 有 两 个 : relative 和 absolute。 其 中 ，absolute 表 
示 绝 对 定位 ， 即 元 素 将 从 页 面 元 素 中 被 独立 出 来 ， 使 用 边 偏 移 进行 定 位 ; relative 表示 相对 
定位 ， 即 元 素 将 保持 原来 的 大 小 ， 偏 移 一 定 的 距离 。 

边 偏 移 包括 4 个 属性 : top、bottom、left 和 right， 分 别 用 于 定义 元 素 相 对 于 其 父 元 素 
上 、 下 、 左 、 右 边线 的 距离 。 该 距离 可 以 是 长 度 值 ， 也 可 以 是 百分比 值 。 

层 营 定位 属性 ( 即 z-index 属性 ) ， 用 来 定义 元 素 层 且 的 顺序 。 其 取 值 为 没有 单位 的 数 
字 值 ， 并 且 可 以 取 负 数值 。 

在 进行 元 素 定 位 时 ， 需 要 结合 这 三 个 属性 ， 即 用 position 属性 确定 定位 模式 ， 然 后 用 
边 偏 移 属 性 定义 元 素 的 位 置 ， 最 后 用 z-index 属性 确定 多 个 元 素 之 间 的 层 肥 关系 。 

(1) 绝对 定位 

绝对 定位 的 命令 格式 如 下 : 

div{position:absolute;} // 绝 对 定位 

绝对 定位 中 ， 定 位 的 元 素 将 从 文档 流 中 删除 ， 其 原先 占用 的 空间 将 被 关闭 就 好 像 该 元 
素 之 前 不 存在 一 样 )。 元 素 定 位 后 ， 将 生成 一 个 块 级 框 ， 而 不 论 其 在 正常 流 中 是 什么 样子 。 

可 以 这 么 理解 : 进行 绝对 定位 的 元 素 ， 其 位 置 是 相对 于 最 近 的 已 设置 了 相对 定位 的 父 
元 素 ， 如 果 没 有 ， 那 么 其 位 置 是 相对 于 最 初 的 包含 块 〈body 的 左上 角 ) 。 

注意 ， 使 用 绝对 定位 的 元 素 会 覆盖 其 他 元 素 或 者 被 其 他 元 素 覆 盖 。 当 使 用 边 偏 移 属性 
确定 元 素 的 位 置 时 ， 是 指 该 元 素 相对 于 其 父 元 素 边线 的 距离 。 

示例 : 

body{ 

background:#cccccc;} /* 定 义 页 面 背 景 */ 
.content{ 


position:absolute; /* 定 位 属性 值 为 绝对 定位 */ 
top:50px; 
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left:50px; 


width:200px; /* 以 下 代码 定义 了 元 素 本 身 的 大 小 和 背景 */ 


height:80px; 
background:#666666; 
Color:#ffffff;} 


<div class="content"> 一 个 使 用 绝对 定位 的 元 素 </div> 

div 元 素 中 定义 的 CSS 属性 为 : 绝对 定位 ， 上 边 和 左边 
各 偏 移 50px， 宽 200px， 高 80px， 背 景 颜色 为 灰色 ， 字 体 颜 
色 为 白色 。 该 样式 应 用 于 网 页 ， 效 果 如 图 2-11 所 示 。 

可 见 ， 在 使 用 绝对 定位 时 ， 定 位 的 参照 标准 是 包含 定位 
属性 的 父 元 素 ， 如 果 没 有 这 样 的 父 元 素 ， 则 元 素 按照 <body> 
元 素 的 位 置 确定 显示 位 置 。 

(2) 相对 定位 

相对 定位 的 命令 格式 如 下 : 


div{position:relative;} // 相 对 定位 


图 2-11 绝对 定位 示例 


在 相对 定位 中 ， 虽 然 元 素 的 位 置 进行 了 相应 的 偏 移 ， 但 元 素 原 来 占有 的 位 置 并 没有 消 


水 浊 


img{ 
position:relative; 
top:0.5em; 
left:100px;} 


。 也 就 是 说 ， 设 置 为 相对 定位 后 ， 元 素 框 会 偏 移 某 个 距离 ， 但 其 形状 仍 为 未 定位 前 的 形 
， 其 原本 占用 的 空间 也 仍然 保留 着 。 这 一 点 与 绝对 定位 截然 不 同 ， 下 面 来 看 一 个 示例 。 


这 是 一 个 关于 <img src="images/show.jpg"” alt="pic” /> 相对 定位 的 示例 ,注意 图 片 元 素 所 在 的 位 置 ， 


这 将 有 助 于 更 好 地 理解 这 个 属性 。 


该 样式 中 ，img 元 素 向 下 偏 移 了 0.5 个 字符 ， 向 右 偏 移 了 100px， 页 面 效果 如 图 2-12 


所 示 。 


地 理 垦 这 个 , 人。 


这 是 一 个 关 ” “示例 注意 图 片 元 素 所 在 的 位 置 ， 这 将 有 助 于 更 好 


图 2-12 ”相对 定位 示例 


可 以 看 到 ， 图 片 元 素 向 右 移动 了 100px， 并 且 和 覆盖 了 部 分 文本 内 容 。 这 是 因为 相对 定 
位 元 素 的 默认 层 倒 属性 值 高 于 其 父 元 素 。 如 果 要 使 文本 内 容 显 示 在 图 片 前 面 ， 就 要 使 用 层 


全 属性 z-index。 例 如 ， 在 样式 中 加 入 如 下 代码 : 


img{z-index: -1;} 


该 样式 应 用 于 网 页 中 ， 效 果 如 图 2-13 所 示 。 
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入 
有 者 定 匀 风 示例 


这 是 一 个 关于 
地 理解 这 个 属性 。 


, 注意 加 片 元 素 所 在 的 位 置 ， 这 将 有 助 于 更 好 


图 2-13 ”相对 定位 中 使 用 层 登 属性 


(3) 两 种 定位 方式 的 比较 

假设 有 3 个 元 素 框 顺序 排列 ， 框 1 在 左 ， 框 2 在 中 ， 框 3 在 右 。 现 分 别 用 绝对 定位 和 
相对 定位 方式 对 框 2 进行 设置 ， 注 意 观察 有 什么 不 同 。 

首先 ， 使 用 绝对 定位 方式 使 框 2 左边 偏 移 30px， 上 边 偏 移 20px， 代 码 如 下 


#box relative {position:absolute; left:30px; top:20px;} 


偏 移 后 的 效果 如 图 2-14 所 示 。 


a 


图 2-14 ”CSS 绝对 定位 
取消 该 代码 ， 换 做 相对 定位 方式 ， 使 框 2 左边 偏 移 30px， 上 边 偏 移 20px， 代 码 如 下 : 


#box relative {position:relative; left:30px; top:20px;} 


偏 移 后 的 效果 如 图 2-15 所 示 。 


:left:30px 


图 2-15 CSS 相对 定位 


可 以 看 出 ， 框 2 脱离 了 原来 的 位 置 ， 相 对 于 原 占 位 空间 偏 移 了 一 定 的 距离 。 框 2 原本 
的 占 位 空间 并 没有 消失 ， 所 以 相对 定位 不 会 对 布局 格式 产生 什么 影响 。 

总 结 : 

党 ”相对 定位 的 元 素 不 会 脱离 文档 流 ， 占 用 文档 流 的 空间 。 

学 ”绝对 定位 的 元 素 会 脱离 文档 流 ， 偏 移 不 影响 文档 流 中 的 其 他 元 素 。 


项 目 2 主页 设计 局 


学 ”绝对 定位 的 元 素 以 最 近 的 定位 祖先 元 素 为 参照 物 。 
3. 元 素 的 浮动 


前 面 介绍 了 元 素 的 定位 ， 下 面 来 讲解 一 下 元 素 的 浮动 。 

浮动 属性 即 float 属性 ， 定 义 了 元 素 是 否 浮动 和 浮动 的 方式 。float 属性 可 以 取 3 个 值 ， 
分 别 是 none、left、right。none 表示 元 素 不 浮动 ，left 表示 元 素 向 左 侧 浮 动 ，right 表示 元 素 
向 右 侧 浮动 。 

定义 了 浮动 属性 的 元 素 ， 会 向 左 或 向 右 移 动 ， 直 到 它 的 外 边缘 碰 到 包含 框 或 男 一 个 浮 
动 框 的 边框 为 止 。 例如 ， 有 3 个 元 素 框 分 行 排列 ， 当 把 框 1 向 右 浮动 时 ， 它 将 脱离 文档 流 ， 
一 直 向 右 移动 ， 直 到 其 右边 缘 碰 到 包含 框 的 右边 缘 ， 如 图 2-16 所 示 。 


不 评 动 的 框 框 1 向 右 浮动 
[ea Fr 一 一 c———- ] 
| | 十 局 | | 1 = || 
1! 11 1 框 2| LL 入 1|| 
| 本 | | 本 
P= fn | 
| et | | | 
1 | 1 
| | 1 1 
1! 21 1| 柜 31 | 
| ESS | 对 二 
F 一 一 一 
| | | | 
i! 1 | 
1 
| 框 31 | 


图 2-16 元 素 的 浮动 


下 面 来 看 两 个 应 用 浮动 属性 定位 的 示例 。 

示例 1: 

<html> 

<style type="text/css"> 

#content a {width:200px; height:80px; float:left;border:lpx solid #000; 
margin:10px; background:#ccc;} 

#content b {width:200px; height:80px; float:left; border:lpx solid #000; 
margin:10px; background:#999;} 

</style> 

<div id="content_a"> 这 是 第 一 个 DIV 不 应 用 浮动 </div> 

<div id="content_b"> 这 是 第 二 个 DIV 向 左 浮动 </div> 

</html> 


上 述 代码 的 显示 效果 如 图 2-17 所 示 。 


吕 - 固 国 
地 址 加 | 本 C:\Docwments 


图 2-17 浮动 效果 
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从 图 2-17 中 可 以 看 到 ， 使 用 了 浮动 属性 后 ， 原 本 需要 换行 显示 的 块 元 素 ， 实 现 了 并 排 
显示 的 排列 效果 。 

示例 2: 浮动 的 延续 性 。 

<html> 

<style type="text/css"> 

#content a {width:200px; height:80px; float:left;border:1lpx solid #000; 

margin:10px; background:#ccc;} 

#content b {width:200px; height:80px; float:left; border:1lpx solid #000; 

margin:10px; background:#999;} 

</style> 

<div id="content_a"> 这 是 第 一 个 DIV 不 应 用 浮动 </div> 

<div id="content_b"> 这 是 第 二 个 DIV 向 左 浮动 </div> 

<div id="foot"> 新 的 一 个 Div</div> 

</html> 


上 述 代码 的 显示 效果 如 图 2-18 所 示 。 


文件 四 婉 相 加) 下 看 WW 收 蕊 人 ) 工具 WD 帮助 0 
9 昌国 多 从 扫 雪 去 收 W 天 全 全 -总 疗 
坟 扯 加 | 外 cpocments and 5ertinges Waninistrator\ 瞩 面 \i_hin 


| 


图 2-18 延续 浮动 效果 


使 用 浮动 属性 进行 页 面 布 局 ， 是 现在 最 常用 的 CSS 布局 方法 。 通 过 合理 地 使 用 浮动 属 
性 ， 配 合 其 他 一 些 辅助 的 CSS 属性 ， 可 以 控制 页 面 中 所 有 元 素 的 显示 位 置 ， 比 如 实现 两 列 
或 三 列 的 布局 、 横 向 的 菜单 等 。 

另外 ,在 网 页 布局 中 还 经 常会 用 到 clear 属性 。 该 属性 用 于 清理 浮动 效果 ， 其 取 值 可 以 
是 left、right、both 或 none， 分 别 用 于 定义 框 的 哪些 边 不 挨 着 浮动 框 。 

clear 属性 有 什么 用 处 呢 ? 这 是 因为 当 多 个 元 素 有 浮动 属性 时 , 会 对 其 父 元 素 或 后 面 的 元 
素 产生 影响 ， 有 时 会 造成 布局 错乱 , 这 时 就 需要 通过 clear 属性 来 清除 浮动 的 影响 (如 图 2-19 
所 示 ) 。 


福 动 元 素 不 占据 空间 进行 清理 的 宝 div 


图 2-19 ”清理 浮动 的 例子 
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示例 3: 将 示例 2 中 的 浮动 效果 取消 。 代 码 如 下 : 


<style type="t 
#content a {wi 


ext/css"> 
dth:200px; height:80px; float:left;border:lpx solid #000; 


margin:10px; background:#ccc;} 


#content b {wi 


dth:200px; height:80px; float:left; border:lpx solid #000; 


margin:10px; background:#999;} 
#foot {clear:both;} 


</style> 


显示 效果 如 图 


2-20 所 示 。 


ET led 
文件 到 ) 编辑 下 ) 查看 VW) 收 豪 和 ) 工具 GD) 帮助 00) 四 


9 D - 国 国 多 记 扫 收藏 天 名 加 " 间 回 " 


地 让 四 外 | cnents snd Settings\Adninistrator\ 桌 面 \a ht | 国 苇 到 ”全 渤 > 


图 2-20 取消 浮动 后 的 效果 


总 之 ， 利 用 定位 和 浮动 属性 可 以 建立 列 式 布局 ， 可 将 布局 的 一 部 分 与 男 一 部 分 重 营 ， 
还 可 以 完成 表格 布局 中 需要 使 用 多 个 表格 ， 并 需要 进行 编码 才能 实现 的 布局 效果 ， 从 而 有 
效 地 减少 代码 量 ， 使 得 页 面 结构 更 加 清晰 ， 代 码 更 加 精简 。 


2.1.5 ”常见 的 
1. display 属性 
display 属性 用 


CSS 属性 


于 确定 元 素 框 的 类 型 ， 其 大 致 描述 如 表 2-2 所 示 。 
表 2-2 display 属性 


属 性 描述 

none 元 素 不 会 被 显示 

block 元 素 将 显示 为 块 级 元 素 ， 前 后 会 带 有 换行 符 

inline 默认 值 。 元 素 将 显示 为 内 联 元 素 ， 前 后 没有 换行 符 

inline-block 元 素 将 显示 为 行内 块 元 素 

list-item 元 素 将 作为 列表 显示 

run-in 元 素 将 根据 上 下 文 ， 作 为 块 级 元 素 或 内 联 元 素 显示 

table 元 素 会 作为 块 级 表格 来 显示 (类 似 <table>) ， 表 格 前 后 带 有 换行 符 
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【 兰 难 芝 江 福全 汪 六 下 公民 区 学 中 相遇 直 】 
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续 表 
属 性 描述 
inline-table 元 素 会 作为 内 联 表格 来 显示 (类 似 <table>)， 表 格 前 后 没有 换行 符 
table-row-group 元 素 会 作为 一 个 或 多 个 行 的 分 组 来 显示 类似 <tbody>) 
table-header-group 元 素 会 作为 一 个 或 多 个 行 的 分 组 来 显示 (类似 <thead>) 
table-footer-group 元 素 会 作为 一 个 或 多 个 行 的 分 组 来 显示 (类 似 <tfoot>) 
table-row 元 素 会 作为 一 个 表格 行 显示 (类 似 <tr>) 
table-column-group 元 素 会 作为 一 个 或 多 个 列 的 分 组 来 显示 类似 <colgroup>) 
table-column 元 素 会 作为 一 个 单元 格 列 显示 类似 <col>) 
table-cell 元 素 会 作为 一 个 表格 单元 格 显 示 〈 类 似 <td> 和 <th>) 
table-caption 元 素 会 作为 一 个 表格 标题 显示 (类 似 <caption>) 
inherit 从 父 元 素 继承 display 属性 的 值 
2. background 属性 


[= 


background 征 青 景 


为 背景 ， 也 允许 使 用 背景 图 像 创建 相对 复杂 的 效果 。CSS 在 这 


景 属性 〈 如 表 2-3 所 示 ) ， 
方面 的 能 


是 CSS 中 的 核心 属性 。CSS 允许 用 纯色 作 
远 远 在 HTML 


之 正 。 
表 2-3 ”background 属性 
属 性 描述 CSS 
background-color 规定 要 使 用 的 背景 颜色 1 
background-position 规定 背景 图 像 的 位 置 1 
background-size 规定 背景 图 片 的 尺寸 3 
background-repeat 规定 如 何 重复 背景 图 像 1 
background-origin 规定 背景 图 片 的 定位 区 域 
background-clip 规定 背景 的 绘制 区 域 3 
background-attachment 规定 背景 图 像 是 否 固定 或 者 随 着 页 面 的 其 余部 分 滚动 1 
background-image 规定 要 使 用 的 背景 图 像 1 
inherit 规定 应 该 从 父 元 素 继 承 background 属性 的 设置 1 
3. text 属性 
text 属性 是 文本 属性 ， 其 大 致 描述 如 表 2-4 所 示 。 
表 2-4 text 属性 
属 性 css 
color 设置 文本 的 颜色 1 
direction 规定 文本 的 方向 /书写 方向 2 
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续 表 
属 性 描述 CSS 
letter-spacing 设置 字符 间距 1 
line-height 设置 行 高 1 
text-align 规定 文本 的 水 平 对 齐 方式 1 
text-decoration 规定 添加 到 文本 的 装饰 效果 1 
text-indent 规定 文本 块 首 行 的 缩 进 1 
text-shadow 规定 添加 到 文本 的 阴影 效果 2 
text-transform 控制 文本 的 大 小 写 1 
unicode-bidi 设置 文本 方向 2 
white-space 规定 如 何 处 理 元 素 中 的 空白 1 
word-spacing 设置 单词 间距 1 
4.font 属性 
font 属性 是 字体 属性 ， 其 大 致 描述 如 表 2-5 所 示 。 
表 2-5 font 属性 
属 性 描述 CSS 
font 在 一 个 声明 中 设置 所 有 字体 属性 1 
font-family 规定 文本 的 字体 系列 1 
font-size 规定 文本 的 字体 尺寸 1 
font-size-adjust 为 元 素 规 定 aspect 值 2 
font-stretch 收缩 3 2 
font-style 规定 文本 的 字体 样式 1 


font-variant 


规定 是 否 以 小 型 大 写字 母 的 字体 显示 文本 


font-weight 


5. position 属性 


规定 字体 的 粗细 


position 属性 用 于 确定 元 素 的 定位 类 型 ， 其 可 能 的 取 值 如 表 2-6 所 示 。 


生成 绝对 定位 的 元 素 ， 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定位 。 元 素 的 位 置 由 left、 


表 2-6 _ position 属性 


ue top、right、bottom 属性 确定 

a 生成 绝对 定位 元 素 ， 相 对 于 浏览 器 窗口 进行 定位 。 元 素 的 位 置 由 left、top、right、bottom 属 
性 确定 

relative | 生成 相对 定位 元 素 , 相对 于 其 正常 位 置 进行 定位 。 例如 , left:20 会 向 元 素 的 left 位 置 添加 20px 
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续 表 


值 描述 


默认 值 。 没有 定位 ， 元 素 出 现在 正常 的 流 中 (忽略 top、bottom、left、right 或 z-index 声明 ) 


从 父 元 素 中 继承 position 属性 的 值 
6. float 属性 


float 属性 用 于 定义 元 素 朝 哪个 方向 浮动 。 在 CSS 中 , 任何 元 素 都 可 以 浮动 ， 并 会 生成 
一 个 块 级 框 。 如 果 浮 动 非 蔡 换 元 素 ， 则 要 指定 一 个 明确 的 宽度 ; 否则 ， 它 们 会 尽 可 能 的 窗 。 


float 属性 的 大 致 描述 如 表 2-7 所 示 。 
表 2-7 float 属性 
值 描述 
left 元 素 向 左 浮动 
right 元 素 向 右 浮动 
none 默认 值 ， 元 素 不 浮动 ， 显 示 其 在 文本 中 出 现 的 位 置 
inherit 从 父 元 素 继承 float 属性 的 值 
2.1.6 ”常用 的 网 页 布局 方式 
1. 网 页 整体 布局 设计 


从 网 站 整体 布局 设计 上 来 看 ， 目 前 比较 流行 的 布局 结构 有 3 种 (如 图 2-21 所 示 ) 。 
学 ”最 常见 的 上 中 下 结构 。 

党 ”上 中 下 结构 中 ， 中 间 部 分 又 分 为 左 侧 边栏 和 右 侧 主 内 容 区 。 

党 ”上 中 下 结构 中 ， 中 间 部 分 又 分 为 两 侧 边栏 和 中 间 主 内 容 区 。 


【 兰 汰 信 并 福全 洪 委 六 淮 广 册 席 区 本 呈 丰 】 


2-21 3 种 流行 的 布局 结构 


2. 网 页 局 部 布局 设计 


在 进行 网 页 局 部 布局 时 ， 常 用 到 3 种 布局 方式 : 列表 框 、 列 表 图 标 以 及 横向 导航 。 
(1) 列表 框 
列表 框 布局 通常 用 于 显示 一 些 简 单 的 通知 信息 ， 如 图 2-22 所 示 。 
要 实现 列表 框 布局 ， 需 要 <div> 标 签 和 <ul> 列 表 标 签 一 起 结合 使 用 。 例 如 : 
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<div> 
<h3></h3> 
<ul> 
<1i>...</1i> 
cl 
</ul> 
</div> 


(2) 列表 图 标 


列表 图 


要 实现 列表 


<img ... 


<span>... 


标 布 局 通常 用 于 显示 一 些 带 有 图 标的 信息 ， 如 图 2-23 所 示 。 


图 标 布局 ， 需 要 <img> 标 签 和 <span> 标 签 一 起 结合 使 用 。 例 如 


/><span>...</span> 


</span> 


span{background-image:url (images/navbg.jpg) ;text-Indent:10px;} 


(3) 横向 导航 
横向 导航 布局 通常 用 在 网 站 的 导航 菜单 上 ， 效 果 如 图 2-24 所 示 。 


最 新 促销 1 商城 公告 更 多 
促销 商品 一 国 虎 年 贺岁 送 红包 开始 了 ! 
促销 商品 一 加 迎新 春 ， 天 悦 服 务 再 上 级 ! 
促销 商品 一 
促销 商品 一 

促销 商品 一 

促销 商品 一 58 购 攀 茵 100 元 : 

图 2-22 ”列表 框 图 2-23 列表 图 标 


图 2-24 横向 导航 


要 实现 横向 导航 布局 ， 需 要 <div> 标 签 和 <ul> 列 表 标签 一 起 结合 使 用 ， 并 需要 在 的 1 
列表 项 中 加 入 超 链 接 。 例 如 


<div id="menu"> 


<ul> 


</ul> 
</div> 


<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 
<li><a 


任务 实施 


本 网 站 的 主页 从 整体 上 可 分 为 3 个 部 分 : 头 部 、 中 间 、 底 部 。 头 部 一 般 放 置 公司 名 称 


href="#"> 首 页 </a></1i> 

href="#"> 公 司 介绍 </a></1i> 
href="#"> 新 闻 中 心 </a></1i> 
href="#"> 产 品 信息 </a></1i> 
href="#"> 服 务 支持 </a></1i> 
href="#"> 招 贤 纳 士 </a></1i> 
href="#”> 在 线 留 言 </a></1i> 
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【 尝 玲 车 尖 守信 济 点 泌 玛 让 岗 痪 半 加 2 加 3】 


【学 东 芒 洪福， 仿 汶 由 总 玲 信 懂 项 闪闪 二 叶 直 】 
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及 Logo 信息 ; 中 部 为 主要 内 容 区 域 ， 由 于 内 容 较 多 ， 又 把 它 分 为 上 、 中 、 下 三 部 分 ; 底部 
放置 网 站 的 版 权 信息 。 

步骤 1: 用 DIV 将 网 页 分 为 头 部 、 中 间 、 底 部 三 大 部 分 。 

(1) 打开 Visual Studio 2010 开发 工具 ， 找 到 Index.aspx， 如 图 2-25 所 示 。 

(2) 编辑 Index.aspx 文件 ， 如 图 2-26 所 示 。 


| 解决 方案 资源 管理 器 hx 
wlletAlslelkol) 
习 解决 方案 “webCompany”(1 个 项 目 ) 
4 闻 cv-\webcompany\ 
加 Admin 


末 App_code 


《div id="nain”> 
各 bin 

国 DataBase 

各 Images 

入 login 

a scripts 
国安 法 说明 

国 Indexaspx 
国 Indexhtml 

国 listhtml 

国 istzhtml 

国 Newslistaspx 
轧 web.config 


d="botto 


div i mn" > 
《div> 版 权 所 有 : 广东 行政 职业 学 院 《</div> 


<div> 
技术 支持 : 周 联系 电话 : 136111111111 
Ydivy 


div> 
div 


图 2-25 找到 Index.aspx 文件 图 2-26 编辑 Index.aspx 页 面 结构 
步骤 2: 编写 如 下 CSS 代码 。 


<style type="text/css"> 

ul,h3,h4,h5, h6,1i,body{margin:0px; padding:0;} 
img{border:none;} 

body{font-size:12px; background-color:#eee;} 

#main{width: 960px;background-color:#fff; margin:0px auto;} 
#top{} 


#menubar{background-color:#FFA200; height:5px; clear:both;} 

#middle{clear:both;} 

#bottom{height:100px; clear:both; background-color:#ccc; border-style:#333px solid 
lpx; line-height:35px; text-align:center;} 

</style> 


上 述 代 码 中 ， 主 要 完成 了 如 下 设置 。 
学 ”设置 id 名 为 main 的 DIV 的 样式 为 : 宽度 960px， 背 景 颜色 为 #fff， 上 下 是 0， 左 


右 是 自动 。 
学 ”设置 id 名 为 menubar 的 DIV 的 样式 为 : 背景 颜色 为 #FFA200， 高 度 为 Spx， 清 除 
浮动 。 


任务 2 导航 菜单 的 制作 


一 个 网 站 中 ,导航 菜单 的 设计 合理 与 否 ， 关系 着 用 户 能 否 快速 找到 自己 所 需要 的 内 容 。 
一 个 有 吸引 力 的 导航 条 能 吸引 用 户 浏 览 更 多 的 页 面 内 容 , 从 而 无 形 中 起 到 推广 网 站 的 作用 。 
本 任务 中 ， 将 制作 首页 上 方 的 导航 菜单 。 需 要 使 用 DIV 来 设计 主导 航 菜单 ， 并 使 用 
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HTML 的 <ul> 标 签 来 设计 二 级 子 菜单 ， 最 后 结合 使 用 JavaScript 脚本 语言 ， 实 现 当 鼠标 移 


动 到 某 个 菜单 上 时 可 显示 其 二 级 菜单 的 动态 效果 。 
相关 知识 
2.2.1 导航 菜单 的 常用 设计 方式 

网 站 中 ， 导 航 菜单 主要 起 着 以 下 作用 。 


学 ”引导 用 户 查 找 信 息 。 通 过 主导 航 、 次 导航 以 及 分 类 导航 ， 用 户 可 以 快速 找到 自己 


真正 所 需 的 东西 。 


党 “导航 容易 形成 地 图 的 作用 ， 特 别 是 面包 屠 导 航 ， 让 用 户 了 解 网 站 结构 和 定义 网 站 


整体 的 构架 和 网 站 方向 指南 。 


导航 菜单 分 横向 和 纵向 两 种 ， 其 中 ， 横 向 导航 菜单 是 目前 最 流行 的 菜单 设计 模式 ， 常 


作为 主导 航 条 使 用 。 导 航 菜单 的 导航 项 可 以 是 文字 链接 、 按 钮 形状 或 选项 卡 形状 。 


如 果 网 站 内 容 较 多 ， 通 常会 在 主导 航 菜单 下 设置 二 级 子 菜单 ， 一 般 是 一 个 下 拉 菜 单 ， 
当 用 户 鼠标 移 到 主 菜单 上 某 选 项 上 时 , 滑 出 其 二 级 子 导 航 项 ， 以 方便 用 户 快速 定位 和 选择 。 


如 图 2-27 所 示 就 是 包含 二 级 子 菜单 的 横向 导航 菜单 。 


英文 域名 中 文 域名 通用 网 址 价格 列表 


图 2-27 含 二 级 子 菜单 的 横向 导航 菜单 


这 种 动态 的 菜单 效果 是 怎么 实现 的 呢 ? 通常 情况 下 ， 需 要 借助 于 JavaScript 脚本 语言 


来 实现 。 下 面 ， 我 们 就 来 认识 一 下 什么 是 JavaScript。 


2.2.2 ”什么 是 JavaScript 


JavaScript 是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event Driven) 并 具有 安全 性 能 的 脚 
本 语言 。 由 网 景 公司 的 布 兰 登 。 艾 克 于 1995 年 设计 而 成 。 网 景 公 司 希 望 它 的 外 观看 起 来 像 


Java， 因 此 为 它 取 名 JavaScript。 


网 页 通过 JavaScript 脚本 程序 ， 可 以 实现 数据 的 传输 和 动态 交互 。JavaScript 的 解释 器 
被 称 为 JavaScript 引擎 ， 是 浏览 器 的 一 部 分 ， 广泛 用 于 客户 端 ， 以 用 来 给 html 网 页 增加 动 


态 功能 。 现 在 ，JavaScript 也 被 广泛 应 用 于 网 络 服务 器 。 
JavaScript 的 特点 主要 体现 在 以 下 几 个 方面 。 
(1) 嵌入 式 脚本 语言 
JavaScript 是 使 用 <scrip 亿 …</scrip 人 标签 嵌入 在 html 中 的 ， 当 html 在 浏览 器 


被 打 
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时 ，JavaScript 代码 才 被 执行 ， 是 对 html 的 一 种 扩展 。 

当 编 写 的 脚本 过 于 复杂 时 ，JavaScript 代码 也 可 以 作为 单独 的 文件 存在 〈 扩 展 名 js) ， 
通过 对 html 文档 的 调用 被 执行 。 例 如 : 

<script language = "JavaScript" type = "text/JavaScript" src = "filename.js"></script> 

(2) 跨 平台 性 脚本 语言 

JavaScript 是 依赖 于 浏览 器 的 ， 与 操作 系统 无 关 。 如 果 使 用 的 浏览 器 不 支持 JavaScript， 
那么 髋 套 在 html 中 的 JavaScript 代码 将 会 被 忽略 掉 。 

(3) 解释 型 脚本 语言 

应 用 程序 的 执行 有 编译 和 解释 两 种 方式 : 

党 ”编译 是 将 程序 源 代 码 解 释 成 可 执行 的 二 进 制 代码 文件 ， 如 .exe 文件 。 我 们 所 熟悉 

的 Java、C++ 等 编程 语言 都 是 如 此 。 

党 ”JavaScript 代码 并 不 被 编译 成 二 进 制 代码 文件 ， 而 是 作为 html 文件 的 一 部 分 执行 。 

(4) 弱 类 型 脚本 语言 

Java 是 一 种 强 类 型 语言 ， 即 所 有 变量 在 使 用 前 必须 进行 声明 ， 并 确定 其 数据 类 型 。 而 
JavaScript 采用 弱 类 型 形式 ， 数 据 的 变量 或 常量 不 必 使 用 前 先 声 明 ， 只 需 在 使 用 或 赋值 时 确 
定 其 数据 类 型 即 可 。 例 如 : 


integer x = 123 ; string y = "123"; // _ Java 语句 
eh a, // JavaScript 语 名 


(5) 基于 对 象 的 脚本 语言 
Java、C++ 等 都 是 面向 对 象 的 程序 设计 语言 , 而 JavaScript 则 是 基于 对 象 (Object-Based) 
的 脚本 语言 ， 因 为 它 并 不 提供 抽象 、 继 承 、 重 载 等 有 关 面 向 对 象 语言 的 许多 功能 。 


2.2.3 _ JavaScript 基础 


JavaScript 脚本 语言 同 其 他 语言 一 样 ， 有 它 自身 的 基本 数据 类 型 、 表 达 式 、 算 术 运 算 符 
以 及 基本 程序 框架 。JavaScript 通过 数据 类 型 来 处 理 数 字 和 文字 ,通过 变量 来 提供 存放 信息 
的 地 方 ， 通 过 表达 式 来 完成 较 复杂 的 信息 处 理 。 下 面 就 来 一 一 介绍 。 

1. JavaScript 的 数据 类 型 


JavaScript 提供 了 4 种 基本 的 数据 类 型 和 两 种 特殊 数据 类 型 用 来 处 理 数 据 和 文字 。 而 变 
量 提 供 存 放 信 息 的 地 方 ， 表 达 式 则 可 以 完成 较 复 杂 的 信息 处 理 。 
(1) 基本 数据 类 型 
学 ”数值 型 Cnumber) : 包括 整数 和 实数 。 
学 ”字符 串 型 (string) : 用 " "号 或 ' ' 括 起 来 的 字符 或 数值 。 
学 ”布尔 型 (boolean ) : 使 用 true 或 false 表示 。 
由 空 值 : 用 关键 字 null 表示 。 
(2) 特殊 数据 类 型 
学 ”未 定义 (undefined) : 表示 一 个 未 声明 的 变量 ， 或 已 声明 但 没有 赋值 的 变量 。 
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党 ”对象 类 型 (object) : 就 是 一 组 数据 和 功能 的 集合 ， 在 后 面 的 应 用 中 会 详细 介绍 。 
(3) 数据 类 型 转换 

当 表 达 式 中 包含 有 不 同类 型 数据 时 ， 在 计算 过 程 中 会 强制 进行 类 别 转 换 。 例 如 : 

学 ”数字 + 字符 串 : 数字 转换 为 字符 串 。 

学 ”数字 + 布尔 值 : true 转换 为 1，false 转换 为 0。 

学 ”字符 串 + 布 尔 值 : 布尔 值 转换 为 字符 串 true 或 false。 

也 可 以 使 用 强制 类 型 转换 函数 进行 函数 类 型 的 转换 。 常 见 的 强制 类 型 转换 函数 如 下 。 

党 ”函数 parseInt: 强制 转换 成 整数 。 例 如 ，parseInt("6.12")=6。 

学 ”函数 parseFloat: 强制 转换 成 浮 点 数 。 例 如 ，parseFloat("6.12")=6.12。 

党 ”函数 eval: 将 字符 串 强 制 转换 为 表达 式 并 返回 结果 。 例 如 ，eval("1+1")=2， 

eval("1<2")=true。 

(4) 数据 类 型 查询 

使 用 typeof0 函 数 可 查询 数值 的 当前 类 型 。 例 如 ，typeofl"test"+3)="string"，typeof (nulD)= 


"object"。 


2. JavaScript 中 的 常量 


党 ”布尔 常量 : 如 true，false。 

学 ”整数 常量 : 如 123，0006，0xaff。 

党” 浮 点 数 常量 : 如 2.68，0.005，3.721e+3。 

党 ”字符 串 常量 : 如 "我 是 一 个 字符 串 常量 ! "。 含 转 义 字符 的 字符 串 常量 如 表 2-8 所 示 。 


表 2-8 含 转 义 字符 的 字符 串 常量 


转 义 字符 意义 
wb 退 格 符 制 表 符 
vf 单 引号 
双 引 号 
v 反 钊 线 


学 ”数组 常量 : 见 示例 。 
var arr = new Rrray(3) 
arr[0] "Baidu"; 
arr[1] "Yahoo"; 
arr[2] = "Google"; 


3.JavaScript 中 的 变量 
变量 的 主要 作用 是 存 取 数据 ， 即 变量 是 提供 存放 信息 的 容器 。JavaScript 变量 主要 用 于 


保存 值 或 表达 式 。 


(1) 变量 的 命名 
JavaScript 变量 的 命名 必须 遵守 以 下 规范 : 
学 ”变量 名 必须 使 用 字母 或 者 下 划 线 (_) 开始 。 


Si 
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学 ”变量 名 必须 使 用 英文 字母 、 数 字 或 者 下 划 线 (_) 组 成 。 
学 ”变量 名 不 能 使 用 JavaScript 关键 字 和 保留 字 。 


党 ”变量 名 对 大 小 写 敏 感 。 
JavaScript 中 的 关键 字 如 表 2-9 所 示 。 


表 2-9 JavaScript 中 的 关键 字 


break continue default 
delete do false | finally 
for function i in | instanceof 


this 


null switch 


true Var 


while 


(2) 变量 的 声明 和 作用 域 


JavaScript 变量 在 使 用 前 应 先 做 声明 。 进行 变量 声明 的 最 大 好 处 是 能 及 时 发 现代 码 中 的 
错误 因为 JavaScript 是 动态 编译 的 ， 不 易 发 现代 码 中 的 错误 ， 特 别 是 变量 命名 方面 ) 。 
使 用 var 关键 字 对 变量 进行 声明 。 例 如 : 


Var x} // 不 需要 指定 变量 类 型 
Var xy // 允 许 一 次 定义 多 个 变量 
进行 变量 声明 还 有 另 一 个 重要 作用 一 一 明确 变量 的 作用 域 。JavaScript 中 同样 有 全 局 变 


量 和 局 部 变量 之 分 。 全 局 变量 是 定义 在 所 有 函数 体 之 外 ， 其 作用 范围 是 整个 函数 ， 局 部 变 
量 是 定义 在 函数 体 之 内 ， 只 对 该 函数 可 见 ， 而 对 其 他 函数 是 不 可 见 的 。 
(3) 变量 的 赋值 
示例 : 
var a=1; // 赋 值 为 数值 
var x=" 我 是 一 个 字符 串 "; // 赋 值 为 字符 囊 
var y=x; // 赋 值 为 另 一 变量 
(4) 变量 的 调 
示例 : 


alert (a-1); 
document .write (x); 


4. JavaScript 中 的 注释 


(1) 单行 注释 

单行 注释 以 /开头 ， 例 如 : 
<script language="JavaScript" type="text/JavaScript"> 
// 这 个 是 单行 注释 ， 代 码 输出 标题 
document .write("<hl>This is a header</hl>") 
</script> 
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(2) 多 行 注 释 
多 行 的 注释 以 #* 开 头 ， 以 所 结尾 。 例 如 : 
<script language="JavaScript" type="text/JavaScript"> 
/* 

这 个 是 多 行 注 灵 ， 

下 面 的 代码 输出 一 个 标题 
Wh 
document .write("<hl>This is a header</h1>"); 
</script> 


5. 运算 符 与 表达 式 


JavaScript 运算 符 包括 算术 运算 符 、 赋 值 运算 符 、 关 系 运 算 符 、 逻 辑 运 算 符 、 条 件 运 算 
符 、 位 运算 符 、 喜 号 运算 符 等 。 
(1) 算术 运算 符 
算术 运算 符 包括 加 (+) 、 减 (-) 、 乘 (*) 、 除 (/) 、 余 数 (%) 、 自 增 (++) 、 自 
减 〈--) 7 种 运算 符 。 其 中 : 
光 ”加 、 减 、 乘 、 除 、 余 数 运算 符 的 运算 方法 与 数学 中 一 样 。 例 如 ，9/2=4.5，4*5=20， 
9%2=1。 
学”“-” 除 了 可 以 表示 减 号 ， 还 可 以 表示 负 号 。 例 如 : x=-y。 
学”““+?” 除 了 可 以 表示 加 法 运算 , 还 可 以 用 于 字符 串 的 连接 。 例 如 , "abc"+"def"="abcdef'。 
“it+” 相 当 于 “i=it1”，“i--” 相 当 于 “i=i-1”。 假 如 x=2， 那 么 “x++;” 表 达 式 
执行 后 的 值 为 3, “x--;” 表 达 式 执行 后 的 值 为 1。 递增 和 递减 运算 符 可 以 放 在 变量 前 ， 
也 可 以 放 在 变量 后 。 
(2) 赋值 运算 符 
赋值 运算 符 包 括 “=”、“+4=”、“-=”、“#=”、“/=” 和 “%=” 6 种 。 
例如 ，“x+=y” 等 价 于 “x=x+y”，“x*=y” 等 价 于 “x=x*y”。 
(3) 关系 运算 符 
关系 运算 符 包括 小 于 (<) 、 小 于 等 于 (<=) 、 大 于 (>) 、 大 于 等 于 (>=) 、 等 于 (一 ) 、 
严格 等 于 (一 =) 、 不 等 于 (!=) 、 严 格 不 等 于 〈! 一 ) 。 
注意 : 只 有 两 个 操作 数 的 值 相等 并 且 类 型 也 相同 时 , 一 致 性 运算 符 "==" 的 计算 结果 才 
为 tme， 否 则 其 值 为 false。 
例如 : 表达 式 "12" 一 12 的 结果 为 true， 而 表达 式 "12" 一 =12 的 结果 为 false， 原 因 在 于 
它们 的 数据 类 型 不 一 致 。 
(4) 逻辑 运算 符 
逻辑 运算 符 包括 逻辑 与 (&&) 、 逻 辑 或 (|) 和 逻辑 非 (!) 。 
学。 &&: 全 真 为 真 ， 否 则 为 假 。 
党 |: 全 假 为 假 ， 否 则 为 真 。 
例如 ，(true&&false)==false，(truellfalse)==true，!true==false。 
(5) 条 件 运 算 符 
条 件 运 算 符 (? :) 主要 用 于 条 件 表达 式 ， 其 语法 格式 为 : variablename=(condition)? 
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valuel:value2 。 
例如 ，“maxMumber=(2>1)?2:1” 的 结果 为 2。 
(6) 位 运算 符 
位 运算 符 包 括 位 与 (&) 、 位 或 (|) 、 异 或 (^) 、 左 移 (<<) 、 右 移 (>>) 和 NOT (~) 。 
例如 : 
3&5=1 (00000011&00000101=00000001) 
3|5=7 (00000011|00000101=00000111) 
3^5=6 (00000011^00000101=00000110) 
~3=-4 (~00000011=11111100) 
4<<3=32 (00000100 左 移 3 位 之 后 结果 为 00100000) 
-9>>2=-3 (11110111 右 移 3 位 之 后 结果 为 11111101) 
(7) 逗号 运算 符 
有 逗号 运算 符 〈,) 用 来 将 多 个 表达 式 连 接 为 一 个 表达 式 ， 新 表达 式 的 值 为 最 后 一 个 表达 
式 的 值 。 例 如 ， 下 列 语句 中 a=12。 


a =(b=1,c=2,d=12); 
6. 程序 控制 语句 


任何 语言 中 , 程序 控制 语句 都 是 必 不 可 少 的。 通过 它 , 程序 才能 按照 既定 的 顺序 执行 ， 
从 而 实现 设 定 的 功能 。 
(1) if…else 条 件 控制 语句 
基本 格式 : 
if (表达 式 ) 
语句 17 
else 
语句 27 
功能 说 明 : 若 表达 式 的 值 为 tue， 则 执行 语句 1， 和 否则 执行 语句 2。 
还 可 以 写 多 重 if…else 语句 ， 或 者 进行 让 语句 的 多 重 嵌 套 。 
(2) switch 条 件 控制 语句 
基本 格式 : 


switch (表达 式 ) { 
case 值 1 :语句 1;break; 
case 值 2: 语 句 2;break; 
case 值 3: 语 句 3;break; 
default :语句 4; 


功能 说 明 : 若 表达 式 的 值 为 trtue， 执 行人 } 内 的 语句 。 首 先 判断 值 1， 如 果 值 1 为 true， 
则 执行 语句 1，switch 语句 执行 结束 ; 如 果 值 1 为 f@lse， 则 判断 值 2， 依 此 类 推 。 值 1、 值 
2、 值 3 都 为 false 时 ， 执 行 语句 4。 

(3) for 循环 控制 语句 

基本 格式 : 


行 { 


项 目 2 主页 设计 冯 
for (初始 化 ;条 件 ; 增 量 ) { 
语 名 1? 
1 
功能 说 明 : 实现 条 件 循 环 。 当 条 件 成 立时 ， 执 行 语句 1， 否 则 跳出 循环 体 。 
(4) while 循环 控制 语句 
基本 格式 : 


while (条 件 ) { 
语 旬 1; 


} 
功能 说 明 : 当 条 件 成 立时 ， 循 环 执行 f} 内 的 语句 ， 否 则 跳出 循环 。 
(5) do…while 循环 控制 语句 
基本 格式 : 
dof 
语句 17 
} i (条 件 ) 
功能 说 明 : 先 执行 f} 内 的 语句 一 次 ,然后 判断 条 件 是 否 为 true。 如 果 是 tue， 就 继续 执 
} 内 的 语句 ， 否 则 跳出 循环 。 
(6) break 和 continue 跳 转 语句 
break 语句 使 得 循环 从 for 或 者 while 中 跳出 , continue 语句 使 得 跳 过 循环 内 剩余 的 语句 


而 进入 下 一 次 循环 。 


7. 函数 
JavaScript 函数 可 以 封装 在 程序 中 可 能 要 多 次 用 到 的 模块 , 并 可 作为 事件 驱动 的 结果 而 


可 


调 月 


目的 程序 ， 这 样 可 以 实现 一 个 函数 把 它 与 事件 驱动 相关 联 。 
定义 函数 的 基本 语法 格式 如 下 : 
function 函数 名 (参数 ) { 
函数 体 ; 
[return 返回 值 ] ; // 只 有 在 需要 返回 某 个 值 的 时 候 才 使 用 return 
| 
说 明 : 


学 ”可 以 使 用 变量 、 常 量 或 表达 式 作为 函数 调用 的 参数 。 
学 ”函数 由 关键 字 fonction 定义 。 

学 ”函数 名 的 定义 规则 与 标识 符 一 致 ， 大 小 写 是 敏感 的 。 
学 ”函数 有 返回 值 时 ， 必 须 使 用 retum。 


<script language= "JavaScript" type= "text/JavaScript" > 
/* Sayhello 是 定义 的 函数 名 ,前面 必 须 加 上 function 和 空格 */ 
function SayHello(){ 

Var hellostr; 

var myname=prompt ("请 问 您 贵 姓 ?"," 陈 "); 


Ss 
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hellostr=" 您 好 ，"+myname+' 先 生 ， 欢 迎 进入 "探索 之 旅 "! '; 
alert (hellostr); 
document .write (hellostr); 

} 

// 这 里 是 对 前 面 定义 的 函数 进行 调用 

SayHello(); 

</script> 


2.2.4 JavaScript 对 象 


JavaScript 是 一 种 基于 对 象 的 语言 ， 对 象 是 JavaScript 中 最 重要 的 元 素 。 对 象 由 属性 和 
方法 封装 而 成 。 
1. JavaScript 对 象 


JavaScript 中 包含 4 种 对 象 : 内 置 对 象 、browser 对 象 (浏览 器 相关 的 对 象 ) 、html DOM 
文档 对 象 和 自 定义 对 象 。 
(1) 内 置 对 象 
JavaScript 提供 了 一 些 非常 有 用 的 内 部 对 象 和 方法 ， 不 需要 使 用 脚本 即 可 实现 这 些 功 能 。 
内 置 对 象 共有 11 种 , 分 别 是 Array、String、Date、Math、Boolean、Number、Function、 
Global、Error、RegExp 和 Object。 除 了 null 和 undefined 类 型 外 ， 其 他 数据 类 型 都 可 以 被 
定义 成 对 象 ， 且 可 以 用 创建 对 象 的 方法 定义 变量 。 
(2) browser 对 象 
browser 对 象 包括 5 种 ， 分 别 是 Window、Navigator、Screen、History 和 Location。 
党 ”Window 对 象 : 表示 浏览 器 中 打开 的 窗口 。 
学 ”Navigator 对 象 : 包含 有 关 浏 览 器 的 信息 。 
党 ”Screen 对 象 : 包含 有 关 客 户 端 显示 屏幕 的 信息 。 
学 ”History 对 象 : 包含 用 户 访问 过 的 URL。 
学 Location 对 象 : 包含 有 关 当前 URL 的 信息 。 
(3) html DOM 文档 对 象 
每 个 载 入 浏览 器 的 html 文档 都 会 成 为 一 个 Document 对 象 。Document 对 象 使 得 用 户 
可 以 从 脚本 中 对 html 页 面 中 的 所 有 元 素 进行 访问 。 
(4) 自 定义 对 象 
在 JavaScript 中 ， 创 建 一 个 新 对 象 的 操作 十 分 简单 。 首 先 需要 定义 一 个 对 象 ， 然 后 为 
该 对 象 创建 一 个 实例 即 可 。 该 实例 就 是 一 个 新 的 对 象 ， 它 具有 对 象 定义 中 的 基本 特征 。 
定义 对 象 的 方法 有 两 种 。 一 种 是 使 用 Object 关键 字 进 行 对 象 定 义 。 首先 , 通过 new 操作 
符 创建 一 个 对 象 ， 然 后 为 其 添加 属性 和 方法 ， 即 可 创建 一 个 能 实现 特定 功能 的 对 象 。 例 如 : 
<script language= "JavaScript" type="text/JavaScript"> 
var o = new Object(); // 定 义 一 个 对 象 
Wy 


o.sex = " 男 "; 
o.age = 18; 


项 目 2 主页 设计 如 
// 给 对 象 增加 方法 


o.methodl = function(){ 
alert ("函数 method1 被 调用 了 "); 


’ 

// 获 取 对 象 属性 

alert (0o.age); 

// 获 取 对 象 方法 

o.methodl () ; 
</script> 


另 一 种 是 使 用 如 nction 关键 字 定 义 对 象 。 格 式 如 下 : 


<script language= "JavaScript" type="text/JavaScript"> 
function 对 象 名 (prop1< 属 性 1>, prop2< 属 性 2>) { 
this.propl = propl; 
this.prop2 = prop2; 
this.methodl = method1; 


} 

</script> 

示例 : 

<script language="JavaScript" type="text/JavaScript"> 
function Person (name，age){// 定 义 了 一 个 Person 对 象 


this .name = name; //Person 对 象 的 name 属 性 
this.age = age //Person 对 象 的 age 属性 
this.Say = sayFunc; //Person 对 象 的 Say 方 法 


} 
function sayFunc(){ 
alert (this["name"]+" "+this["age"]); 
} 
var personl = new Person(" 张 三 ",19); 
personl .Say(); 
</script> 


2. 对 象 操作 语句 一 一 with 语句 


因为 JavaScript 不 是 纯 面向 对 象 的 语言 ， 所 以 没有 提供 面向 对 象 语言 的 许多 功能 。 在 
JavaScript 应 用 中 ， 通 常 使 用 操作 对 象 语句 、 关 键 词 和 运算 符 来 实现 对 对 象 的 操作 。 

with 语句 属于 对 象 操作 语句 ， 用 途 是 为 一 组 语句 创建 默认 的 对 象 。 在 这 组 语句 中 ， 任 
何不 指定 对 象 的 属性 引用 ， 都 将 被 认为 是 默认 对 象 的 。 

基本 格式 : 


with( 对 象 ) { 
语句 组 
} 


例如 : 


var a, x, y var r=10 
with (Math) { 

a = 
xX=r* Cos(PI) 
y=r* sin(PI/2) 
} 
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3. JavaScript 中 常见 的 内 置 对 象 


在 JavaScript 中 ， 提 供 了 String (字符 串 ) 、Math (数值 计算 ) 和 Date (日 期 ) 3 种 对 
象 及 其 相关 的 方法 ， 从 而 为 编程 人 员 快 速 开 发 强大 的 脚本 程序 提供 了 非常 有 利 的 条 件 。 
(1) String 对 象 


String 对 象 用 于 处 理 文本 〈 字 符 串 ) ， 其 常见 属性 如 表 2-10 所 示 。 
表 2-10 String 对 象 的 属性 


对 创建 该 对 象 函 数 的 引用 
字符 中 的 长 度 
允许 向 对 象 添加 属性 和 方法 


Constructor 


Length 


String 对 象 的 常见 方法 描述 如 下 。 

党 anchor0: 创建 html 锚 。 

学 “big(0: 用 大 号 字体 显示 字符 串 。 

学 ”blink0): 显示 闪 动 字符 串 。 

党 “bold0: 使 用 粗 体 显 示 字 符 串 。 

学 ”charAt0: 返回 在 指定 位 置 的 字符 。 

党 ”charCodeAt(): 返回 在 指定 位 置 的 字符 的 Unicode 编码 。 
党 ”concat():; 连接 字符 串 。 

党 ”fixed0: 以 打字 机 文本 显示 字符 串 。 

学 fontcolor0: 使 用 指定 的 颜色 来 显示 字符 串 。 

学 ”fontsize(): 使 用 指定 的 尺寸 来 显示 字符 串 。 

学 ”fromCharCode0: 从 字符 编码 创建 一 个 字符 串 。 

必 ”indexOf0: 检索 字符 串 。 

学 italics0): 使 用 斜体 显示 字符 串 。 

党 ”lastIndexOf(): 从 后 向 前 搜索 字符 串 。 

学 link0: 将 字符 串 显示 为 链接 。 

localeCompare(): 用 本 地 特定 的 顺序 来 比较 两 个 字符 串 。 
matchO0: 找到 一 个 或 多 个 正则 表达 式 的 匹配 。 
replace(): 蔡 换 与 正则 表达 式 匹 配 的 子 串 。 

search(0: 检索 与 正则 表达 式 相 匹配 的 值 。 

slice(): 提取 字符 串 的 片断 ， 并 在 新 的 字符 串 中 返回 被 提取 的 部 分 。 
small0: 使 用 小 字号 来 显示 字符 串 。 

split0: 把 字符 串 分 割 为 字符 串 数 组 。 

strike(): 使 用 删除 线 来 显示 字符 串 。 

sub0: 把 字符 串 显 示 为 下 标 。 

substr(): 从 起 始 索引 号 提取 字符 串 中 指定 数目 的 字符 。 


te 


多 


te 


Me 


te 


人 


te 


人 


人 


人 


人 


人 


0 


0 


4 
人 


ie 
人 


人 
人 
人 
人 
人 


we 
人 


ee， 
人 


项 目 2 主页 设计 如 


substring0: 提取 字符 串 中 两 个 指定 索引 号 之 间 的 字符 。 
sup(): 把 字符 串 显示 为 上 标 。 

toLocaleLowerCase(): 把 字符 串 转换 为 小 写 。 
toLocaleUpperCase(): 把 字符 串 转 换 为 大 写 。 
toLowerCase(): 把 字符 串 转换 为 小 写 。 

toUpperCase(): 把 字符 串 转 换 为 大 写 。 

toString(): 返回 字符 串 。 

valueOf(): 返回 某 个 字符 串 对 象 的 原始 值 。 


(2) Math 对 象 
Math 对 象 的 常见 属性 如 表 2-11 所 示 。 


表 2-11 Math 对 象 的 属性 


属 性 描述 

E 返回 算术 常量 e， 即 自然 对 数 的 底数 
LN2 返回 2 的 自然 对 数 

LN10 返回 10 的 自然 对 数 

LOG2E 返回 以 2 为 底 的 e 的 对 数 

LOG10E 返回 以 10 为 底 的 e 的 对 数 

PI 返回 圆周 率 

SQRT1 2 返回 2 的 平方 根 的 倒数 

SQRT2 返回 2 的 平方 根 


Math 对 象 的 常见 方法 描述 如 下 。 


er， 
人 


os， 
人 


te 


人 


> 


4 


0 


4 


te 


” 


0 


9 


te 


人 


0 


人 


te 


人 


+ 
人 


> 


人 


abs(x): 返回 数 的 绝对 值 。 

acos(X): 返回 数 的 反 余弦 值 。 

asin(x): 返回 数 的 反正 弦 值 。 

atan(x): 以 介 于 -PI2 一 PI2 弧度 之 间 的 数值 ， 来 返回 x 的 反正 切 值 。 
atan2(y,x): 返回 从 x 轴 到 点 (x,y) 的 角度 〈 介 于 -PI2 一 PI2 弧度 之 间 )。 
ceil(x): 对 数 进 行 上 舍 入 。 

cos(x): 返回 数 的 余弦 。 

exp(x): 返回 e 的 指数 。 

floor(x): 对 数 进行 下 舍 入 。 

log(x): 返回 数 的 自然 对 数 〈 底 为 e)。 

max(xy): 返回 x 和 y 中 的 最 大 值 。 

min(xy): 返回 x 和 y 中 的 最 小 值 。 


(3) Date 对 象 
Date 对 象 的 常见 属性 如 表 2-12 所 示 。 


【学 孙 芝 洪福 : 仿 注 点 问 玲 我 沿 讽 半圆】 


【学 节 芒 洪福， 全 汶 由 总 玲 全 懂 殴 党 小 时 直 】 
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表 2-12 Date 对 象 的 属性 


属 性 描述 
constructor 对 创建 该 对 象 的 Date 函数 的 引用 


prototype 允许 向 对 象 添加 属性 和 方法 


Date 对 象 的 常见 方法 描述 如 下 。 


必 
人 
人 
人 
必 
必 
必 
人 
人 
人 
人 
人 
人 
人 
人 
人 
人 


人 


Date0: 返回 当前 的 日 期 和 时 间 。 

getDate(): 从 Date 对 象 返 回 一 个 月 中 的 某 一 天 〈1 一 31)。 

getDay(): 从 Date 对 象 返回 一 周 中 的 某 一 天 〈0 一 6)。 

getMonth(0): 从 Date 对 象 返回 月 份 (0 一 11 )。 

getFullYear(): 从 Date 对 象 以 四 位 数字 返回 年 份 。 

getYear(): 使 用 getFullYear() 方 法 代 蔡 。 

getHours0): 返回 Date 对 象 的 小 时 〈0 一 23 )。 

getMinutes0: 返回 Date 对 象 的 分 钟 0 一 59) 。 

getSeconds(): 返回 Date 对 象 的 秒 数 (0 一 59 )。 

getMilliseconds(): 返回 Date 对 象 的 毫秒 (0 一 999 )。 

getTime(): 返回 1970 年 1 月 1 日 至 今 的 毫秒 数 。 
getTimezoneOffset(): 返回 本 地 时 间 与 格林 威 治标 准时 间 (GMT)》 的 分 钟 差 。 
getUTCDate0: 根据 世界 时 间 从 Date 对 象 返 回 月 中 的 一 天 (1 一 31)。 
getUTCDay(): 根据 世界 时 间 从 Date 对 象 返回 周 中 的 一 天 (0 一 6)。 
getUTCMonth(): 根据 世界 时 间 从 Date 对 象 返回 月 份 (0 一 11)。 
getUTCEFullYear0: 根据 世界 时 间 从 Date 对 象 返 回 四 位 数 的 年 份 。 
getUTCHours0: 根据 世界 时 间 返 回 Date 对 象 的 小 时 〈0 一 23 )。 
getUTCMinutes0: 根据 世界 时 间 返 回 Date 对 象 的 分 钟 《0 一 59) 。 


2.2.5_ JavaScript 事件 


用 户 在 浏览 器 内 所 进行 的 某 种 动作 称 为 事件 。 事 件 通常 是 可 以 被 JavaScript 侦 测 到 的 
行为 ， 如 鼠标 单 击 、 页 面 或 图 像 载 入 、 鼠 标 悬 浮 于 页 面 的 某 个 热点 之 上 、 在 表单 中 选取 输 
入 框 、 确 认 表 单 、 键 盘 按 键 等 。 

在 JavaScript 中 ， 通 常 将 鼠标 或 热 键 的 动作 称 之 为 事件 (Event) ， 将 由 鼠标 或 热 键 引 
发 的 一 连 串 程序 的 动作 称 为 事件 驱动 ， 将 对 事件 进行 处 理 的 程序 或 函数 称 之 为 事件 处 理 程 
序 (Event Handler) 。 

JavaScript 中 的 常用 事件 如 表 2-13 所 示 。 


表 2-13 ”JavaScript 中 的 常用 事件 


事 件 描述 


onabort 图 像 加 载 被 中 断 


项 目 2 主页 设计 如 


事 件 描述 
onblur 元 素 失去 焦点 
onchange 用 户 改 变 域 的 内 容 
onclick 鼠标 单 击 某 个 对 象 
ondblclick 鼠标 双击 某 个 对 象 
onerror 当 加 载 文档 或 图 像 时 发 生 某 个 错误 
onfocus 元 素 获 得 焦点 
onkeydown 某 个 键盘 的 键 被 按 下 
onkeypress 某 个 键盘 的 键 被 按 下 或 按 住 
onkeyup 某 个 键盘 的 键 被 松 开 
onload 某 个 页 面 或 图 像 完 成 加 载 
onmousedown 某 个 鼠标 按键 被 按 下 
onmousemove 鼠标 被 移动 
onmouseout 鼠标 从 某 元 素 移 开 
onmouseover 鼠标 被 移 到 某 元 素 之 上 
onmouseup 某 个 鼠标 按键 被 松 开 
onreset i 置 按钮 被 单 
onresize 窗口 或 框架 被 调整 尺寸 
onselect 文本 被 选 定 
onsubmit 提交 按钮 被 单 击 
onunload 用 户 退 出 页 面 
事件 范例 : 
<html> 
<head> 
<title>Displaying Time</title> 
<script language = "JavaScript" type = "text/JavaScript" > 
function time(){ 
now = new Date(); 
hours = now.getHours(); 
mins = now.getMinutes (); 
secs = now.getSeconds (); 
document.forml .textl.value = hours + ":" + mins + ";" + secs; 
} 
</script> 
</head> 
<body> 
<form name="form1"> 
<input type = "button" name = "button" value = "click me" onClick = "time()"/> 


<input type = "text" name="text1"/> 


【 尝 玲 六 灌 位 访 漳 些 问 玛 站 内 席 半 加 加 3%】 
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</form> 
</body> 
</html> 


任务 实施 


制作 导航 菜单 主要 用 到 了 DIV 技术 和 HTML 的 <ul> 标签 ， 同 时 要 结合 JavaScript 脚 
本 进行 动态 效果 设计 。 
步骤 1: 在 Visual Studio 2010 开发 工具 中 , 用 DIV 设计 出 主导 航 菜单 ， 用 <ul> 标 签 设 
计 出 二 级 导航 菜单 ， 用 JavaScript 实现 鼠标 滑 过 主 菜 单项 时 显示 二 级 菜单 。 
(1) 打开 Index.aspx， 输 入 如 下 html 代码 : 


<ul class="menunav"> 
<1i><a href="#"> 首 页 </a><span>|</span></1i> 
<1i><a href="#"> 公 司 介绍 </a><span>|</span></1i> 
<1i><a href="#"> 新 闻 中 心 </a><span>|</span></1i> 
<li><a href="#" onmouseover="showobj ('subl')" onmouseout="hiddenobj ('sub1l')"> 
产品 信息 

</a><span>|</span></1i> 

<1i><a href="#"> 服 务 与 支持 </a><span>1</span></1i> 
<1i><a href="#"> 招 贤 纳 士 </a><span>|</span></1i> 
<1i><a href="#"> 联 系 我 们 </a></1i> 

</ul> 


<ul id="subl" class="submenu" onmouseover="showobj ('subl')" onmouseout="hiddenobj ('sub1')" 
style=" display:none; position:absolute; top:40px; left:318px;"> 
<1i><a href="#"> 皮 夹 </a></1i> 
<li><a href="#"> 手 贷 </a></1i> 
<1i><a href="#"> 皮 带 </a></1i> 
</ul> 


(2) 输入 如 下 JavaScript 代码 ， 实 现 动 态 菜 单 效果 。 


<script type="text/JavaSscript"> 
// 获 取 指 定 id 的 文本 标签 
function $(id) { 
return document .getElementById(id); 


b 

// 设 置 指 定 对 象 显示 

function showobj(id) { 
var obj = $(id) 
obj.style.display = ""; 


} 
// 隐 藏 指定 id 的 对 象 
function hiddenobj(id) { 
var obj = $(id) 
obj.style.display = "none" 
} 
function showproinfo(e，id) { 
var obj = $(id); 
obj .style.display = "block"; 
obj .innerhtm1l = (e.srcElement) .title; 
obj.style.top = e.clientY + document .documentElement.scrollTop + 5 + "px"; 
obj.style.left = e.clientX + 5 + "px" 


} 


项 目 2 主页 设计 如 


window.onscroll = function () { 
var objleft = $('adLeft'); 
var objright = $('adright'); 
objleft .style.top = document .documentElement.scrollTop + 50 + 'px'; 
objright.style.top = document .documentElement .scrollTop + 50 + 'px'; 


上 
</script> 


此 时 的 二 级 菜单 效果 如 图 2-28 所 示 。 


图 2-28 二 级 


步骤 2: 编写 CSS 代码 ， 对 菜单 格式 进行 美化 。 代 码 如 下 : 
<style type="text/css"> 
ul,h3,h4,h5,h6,1i,body{ margin:0px; padding:0;} 


img{ border 


:none;} 


body{ font-size:12px; background-color:#eee;} 
#main{ width:960px;background-color:#fff; margin:0px auto; } 


#top{} 


.menul{ width: 


.menucenter 


.menurt{ width: 


1lpx; height: 44px;float: 
{ width: 938px; height: 44px;float: 
llpx;height: 


.menulist{ position:relative;} 

.menunav{ list-style:none; margin:0px; padding:0px;} 
.menunav 1i{ display:inline; line-height:44px; } 
.menunav 1i a{ color:#FFF; text-decoration:none; width:100px; display:inline-block; 


text-align 
.menunav 1i 
.menunav 1i 


.Submenu li a{ color:#000; 


text-align 


:center;} 


a:hover{ color:#F00; background-color:#063;} 
span{ color:#fff;} 

.submenu{ list-style:none; background-color:#FFC;width:100px; margin:0Px7 
padding:0px;} 


:center; } 


left;background-color:#1F0D01;} 
left; background-color:#1F0D01;} 
44px; float: left;background-color:#1F0D01;} 


text-decoration:none; display:block; width:100px; 


.Submenu 1i a:hover{ background-color:#396; color:#CF0;} 
#menubar{ background-color:#FFA200; height:S5px; clear:both;} 


</style> 


网 页 的 中 间 部 分 是 主要 的 内 容 显 示 区 域 。 如 果 内 容 较 多 ， 还 可 以 使 用 上 一 


任务 3 中 间 部 分 的 设计 


中 一 右 的 布局 方式 ， 将 内 容 区 域 分 为 多 块 。 
本 任务 中 , 为 了 实现 中 间 部 分 文字 的 整齐 列表 显示 , 使 用 了 DIV+CSS 布局 方式 ; 同时 ， 


为 了 实现 产品 图 


片 的 滚动 ， 使 


了 JavaScript 脚本 技术 ， 下 面 分 别 进行 介绍 。 


一 下 或 左 一 
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相关 知识 
“产品 展示 ” 栏 内 ， 产 品 图 片 有 很 多 ， 都 是 随机 滚动 显示 的 ， 如 图 2-29 所 示 。 要 实现 


这 种 图 


片 滚动 显示 ， 需 要 用 到 JavaScript 脚本 语言 。 


图 2-29 底部 图 片 滚动 显示 


1. 滚动 的 实现 思路 

要 想 实 现 滚动 ， 其 CSS 设计 思路 如 下 。 

(1) 外 面 一 个 固定 大 小 的 小 盒子 。 

(2) 小 盒子 里 面 嵌 套 一 个 宽度 足够 的 大 盒子 。 

(3) 大 盒子 里 面 嵌 套 两 个 小 盒子 。 

(4) 通过 脚本 函数 动态 改变 最 外 面 小 盒子 的 滚动 条 ， 以 实现 滚动 效果 。 
2. 滚动 效果 的 基本 原理 

要 想 实 现 图片 的 滚动 ， 需 要 用 到 如 下 属性 。 


os， 
人 
人 


os， 
人 


ie 
人 


innerhtml: 设置 或 获取 位 于 对 象 起 始 和 结束 标签 内 的 html。 

scrollHeight: 获取 对 象 的 滚动 高 度 。 

scrollLeft: 设置 或 获取 位 于 对 象 左边 界 和 窗口 中 目前 可 见 内 容 的 最 左 端 之 间 的 
距离 。 

scrollTop: 设置 或 获取 位 于 对 象 最 顶端 和 窗口 中 可 见 内 容 的 最 顶端 之 间 的 距离 。 
scrollWidth: 获取 对 象 的 滚动 宽度 。 

offsetHeight: 获取 对 象 相对 于 版 面 或 由 offsetParent 属性 指定 的 父 坐标 的 高 度 。 
offsetLeft: 获取 对 象 相 对 于 版 面 或 由 offsetParent 属性 指定 的 父 坐标 的 计算 左 侧 
位 置 。 

offsetTop: 获取 对 象 相对 于 版 面 或 由 offsetTop 属性 指定 的 父 坐 标的 计算 顶端 位 置 。 
offsetWidth: 获取 对 象 相对 于 版 面 或 由 offsetParent 属性 指定 的 父 坐 标的 宽度 。 


任务 实施 


步骤 1: 在 Visual Studio 2010 开发 工具 中 找到 网 站 首页 文件 mdex.aspx， 使 用 DIV 与 
CSS 设计 网 页 的 中 间 部 分 ， 代 码 效果 如 图 2-30 所 示 。 


项 目 2 主页 设计 局 


<! 一 网 页 中 间 一 > 
div id=" middle“> 
《! 一 中 间 上 边 部 分 一 > 
<div id=“midtop “> 
di 
div 
Ydiv> 


《! 一 中 间 中 间 部 分 一 > 

div id= "midnid > 
《div 1" > div> 
《div id-"mr">C/div> 

div> 

《! 一 中 间 底 部 部 分 一 > 


div> 


图 2-30 首页 中 间 部 分 的 代码 
步骤 2: 编写 CSS 样式 ， 实 现 中间 部 分 列表 的 整齐 紧 排 效果 。 代 码 如 下 : 


#mb 1{ float:left; width:200px;} 

#mb 1 ul{ list-style:none;} 

#mb 1 ul li{ line-height:30px; border-bottom:dotted lpx #ccc; background:url 
(Images/arrow 02.gif) no-repeat center left; text-indent:20px;} 

#mb 1 ul li a{ color:#000; text-decoration:none;} 


上 述 代码 设置 了 id 名 为 mb_1 的 DIV 的 样式 为 : 向 左 浮动 ， 宽 度 为 200px; 其 内 的 ul 
列表 项 前 没有 什么 修饰 ; li 的 样式 是 行 高 30px， 下 边框 的 虚线 大 小 1px， 颜 色 为 #ecc; 还 设 
置 了 背景 图 片 不 重复 ， 左 侧 垂直 居中 ， 文 字 缩 进 20px。 

步骤 3: 编写 JavaScript 代码 ， 实 现 产 品 图 片 的 滚动 效果 。 参 考 代 码 如 下 : 


var speed=10; 
var demo=document .getElementById("demo"); 
var demol=document .getElementById("demol") 7 
var demo2=document .getElementById ("demo2"); 
demo2 .innerHTML=demol .innerHTML; 
function Marquee (){ 
if (demo2.offsetWidth-demo.scrollLeft<=0) 
{ 
demo.scrollLeft-=demol .offsetWidth; 
Jelse 
{ 
demo.scrollLeft++; 
} 
} 
var timer=window.setInterval (Marquee, speed); 
demo.onmouseover= function() { window.clearInterval (timer)}; 
demo.onmouseout= function() {timer=window.setInterval (Marquee,speed) }; 


上 述 代码 设置 了 图 片 滚动 时 显示 的 宽度 ， 并 设置 了 鼠标 在 图 片上 方 时 清除 滚动 的 时 间 
间隔 ， 鼠 标 离开 图 片 时 重 设 滚动 的 时 间 间 隔 。 


【学 激 人 其 福全 立 征 疙 站 人 斑 厂 区 兴 只 朴 品 夏 】 


【 兰 淮 芝 洪 福 ， 信 六 是 总 水 公 懂 开 党 站 本 咖 了 】 
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项 目 总 结 


在 本 项 目 中 ， 主 要 围绕 主页 的 设计 ， 重 点 讲解 了 DIV、CSS 以 及 JavaScript， 并 利用 这 
三 种 技术 完成 了 网 站 主页 的 设计 。 


拓展 训练 


1. 利用 DIV、CSS 以 及 JavaScript 在 主页 的 下 部 添加 一 个 产品 展示 区 。 
2. 利用 DIV、CSS 以 及 JavaScript 设计 产品 列表 页 面 。 


3a 


新 闻 信 息 绑 定 


项 目 5I 入 


动态 网 站 上 的 新 闻 信息 都 是 存放 在 数据 库 中 的 ， 因 此 ， 显 示 一 条 新 闻 的 过 程 就 是 读 取 
数据 库 中 的 新 闻 信 息 并 将 其 显示 在 页 面 上 的 过 程 。 

要 实现 新 闻 信 息 的 显示 ， 需 要 完成 3 项 工作 : 信息 创建 、 信 息 读 取 和 信息 显示 。 

信息 创建 阶段 主要 完成 创建 数据 库 、 数 据 表 、 存 储 过 程 等 工作 ; 信息 读 取 阶 段 ， 主 要 
是 通过 高 级 语言 (如 C# ) 来 完成 对 数据 库 的 访问 和 操作 ; 完成 这 一 切 后 , 要 进行 信息 显示 ， 
还 需要 进行 信息 绑 定 ， 即 使 用 ASP.NET 提供 的 控件 来 绑 定 读 取 到 的 信息 

信息 绑 定 ， 就 是 指 将 存储 在 网 站 数据 库 中 的 信息 与 网 页 上 的 控件 进行 绑 定 的 过 程 ， 如 
图 3-1 所 示 。 


》 公司 新 闻 更 多 > 


公司 举行 员工 联谊 活动 (2014/8/7 星 直 四 ) 
公司 扩大 规模 生产 013/8/7 星期 =) 
丘 公司 设计 产品 获奖 喜讯 (013/8/7 星 其 =) 
公司 通过 所 有 产品 通过 汗 保 检 列 (2013/8/7 星 直 =) 


peid 


图 3-1 信息 绑 定 


项 目 分 解 


在 本 项 目 中 ， 将 通过 以 下 3 个 任务 ， 来 学 习 和 掌握 网 站 中 实现 动态 信息 绑 定 的 方法 。 
任务 1 创建 数据 库 、 数 据 表 、 存 储 过 程 

任务 2 使 用 C# 编 写 数 据 库 读 操作 

任务 3 使 用 控件 进行 数据 绑 定 


【 兰 汰 芝 并 福全 并 生 六 淮 六 册 席 区 中 可 呈 丰 】 
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任务 1 创建 数据 库 、 数 据 表 、 存 储 过 程 


本 任务 将 采用 SQL Server 数据 库 来 实现 数据 库 、 数 据 表 、 存 储 过 程 的 创建 。 
SQL Server 2012 是 Microsoft 公司 开发 的 系列 数据 库 管 理 平台 ， 是 一 个 可 信任 的 、 智 
能 的 、 高 效 的 数据 库 系统 平台 ， 能 满足 大 中 型 数据 管理 系统 的 需求 。 


相关 知识 
3.1.1 SQL Server 创建 数据 库 、 数 据 表 


SQL Server 2012 中 ， 创 建 数据 库 和 数据 表 可 以 通过 两 种 方式 进行 : 通过 数据 库 管 理 系 
统 创 建 和 通过 SQL 语句 创建 。 下 面 就 以 创建 一 个 Student 数据 库 及 Student 数据 表 为 例 ， 分 
别 介绍 这 两 种 方式 下 如 何 实现 。 


1. 通过 数据 库 管 理 系 统 创建 


(1) 启动 并 连接 数据 库 

在 “开始 ”菜单 中 依次 选择 “所 有 程序 ”一 SQL Server 2012 一 SQL Server Management 
Studio Express 命令 ， 启 动 SQL Server 2012 数据 库 管 理 系统 。 登 录 数 据 库 服务 器 ， 在 “ 连 
接 到 服务 器 ”对 话 框 中 单 击 “ 连 接 ” 按 钮 ， 即 可 连接 到 SQL Server 2012 数据 库 服 务 器 ， 如 
图 3-2 所 示 。 


$6Lserverzo 
服务 器 类 型 1) | 数据 库 引擎 可 
服务 器 名 称 6): 
身份 验证 A) [mindows 身份 验证 了 | 
FPC-20140223CXEE\Administrator 
[加 0 ][ 联 |][ 吉 |][ 天 » | 


图 3-2 ”登录 数据 库 系统 
(2) 创建 数据 库 Student 
在 SQL Server 2012 数据 库 管 理 系 统 左 侧 的 “对 象 资源 管理 器 ” 栏 中 右 击 数据 库 对 象 ， 
在 弹出 的 快捷 菜单 中 选择 “新 建 数 据 库 ” 命 令 ， 如 图 3-3 所 示 。 


项 目 3_ 新 闻 信 息 绑 定 如 


文人 


文件 (篇 剖 (5) 视图， 沁 式 (D) 工具 (TD 窗口 WW) 帮助 (H) 
司 " 可- 世上 电量 | 二 Sa 局 钙 访 太 | 忆 访 | 


对 短 资 源 管 理 8 
放 纺 " 历 检 = 了 回 当 


Minosofe SQl Sever Magenrane So sa 


-ge - 遇 - 马 | 马 | 


了 .是 


日 图 PC-20140223CXEE\SQLEXPRESS (SQL Server 11.0.3128 - PC-20140; 
田 国 


避 扬 SEN)- 
局 服 和 SPehn(A).. 
旦 回复 出 还 gw)-. 
me tH). 
部 轩 数 据 屋 应 用 程序 ().… 
导入 数据 后 应 用 程序 (1). 
启动 PowerShell(H) 
报喜 


局 新 ( 


图 3-3 选择 “新 建 数据 库 ” 命 令 


在 弹出 的 “新 建 数据 库 ” 对 话 框 右 侧 的 “数据 库 名 称 ”文本 框 中 输入 Student， 然 后 单 


223CXEE\Administrator) 


Ee Cd 
选择 页 6 
”7B 
E77 号 W 7 罗 #w 
字 迁 大 
苑 文件 组 数据 庄 名 称 0) Student] | 
所 有 者 O) 全 认 值 > 
他 用 主 
数据 库 文件 中 ) 
脖 扣 名 称 文件 类 型 文件 组 初始 大 小 MB) 自动 增长 /最 大 大 小 
student 行 数据 。” FRIwRY [5 增 量 为 1 轨 ， 增 长 无 限制 避 
| student_log 日 志 不 适用 2 增 量 为 10%, 增长 无 限制 。 加 
| 
连接 
服务 器 | 
PC-20140223CXEE\SQLEXPRESS 
连接 ; | 
BE-20140223CXEE\Adnini strat 
圭 ] 查看 演 接 屋 性 
进度 
就 绍 DA Poe Tp 
| 
Ca | 
| | 
Cms 


图 3-4 输入 数据 库 名 
(3) 在 Student 数据 库 中 新 建 表 Student 


单 击 “ 对 象 资源 管理 器 ” 栏 中 的 “刷新 ”按钮 四 ， 以 显示 新 建 的 数据 库 Student。 然 
后 依次 展开 “数据 库 ” 一 Student 选项 ， 右 击 “ 表 ”项 目 ， 在 弹出 的 快捷 菜单 中 选择 “新 建 


表 ” 命 令 ， 如 图 3-5 所 示 。 
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【演奏 膏 澡 村 .六 济 此 茵 注 匠 内 席 半圆】 


【学 邓 芝 洪福 全 汶 由 总 玲 全 懂 席 党 站 二 叶 直 】 
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ET nl 

司 " 刁 - 配 可 部 |SEasN 遍 包 也 加 | 关 忆 翅 | 9- 人 - 习 " 马 | 台 

一 

对 银 突 其 村 肤 比 时 

过 要 "于 乔 = 了 器 当 

日 图 PC-20140223CXEE\SQLEXPRESS (SQL Server 11.03128 - PC.20140223CXEEWdmi 
日 向 类 匡 幸 


站 


昌国 2 
9 @B ReportseverssQLEXPRESS 
9 国 Reporserver4sQLEXPRESSTemppB 
日 国 suden 

四 四 到 #5 图 

号 坚 
日 国 
有 过 和 NM- 

FE Ferabem- 
2) 


局 动 Foversnelm 
a gan 
= sw 


El 
9 @ webshoppe 
昌国 webshopDB(BAN 

加 安 主任 

四 各 腾 各 话 银 

田 加 复制 

器 局 和 时 


图 3-5 新 建 表 
在 右 侧 的 工作 区 中 输入 新 建 数据 表 的 字段 信息 ， 如 图 3-6 所 示 。 


列 名 数据 尖 型 允许 Null 值 
Sno char(5) 避 
Snam char(10) 可 
Ssex bit 到 
Sage int 
Sdept char(15) 可 
» 


图 3-6 输入 表 的 结构 


上 述 创 建 的 数据 表 中 ， 包 含 了 学 生 学 号 (Sno)、 姓 名 (Sname)、 性 别 (Ssex)、 年 龄 
(Sage)、 院 系 〈Sdept) 等 基础 信息 。 选 择 “ 文 件 ” 一 “保存 ”命令 ,保存 该 表 ， 并 将 其 


命名 为 Student。 
2. 使 用 SQL 语句 创建 数据 库 和 数据 表 


上 年 


单 击 工具 栏 中 的 “新 建 查询 ”按钮 ， 在 弹出 的 “连接 到 服务 器 ”对 话 框 
按钮 ， 新 建 一 个 SQL 脚本 ， 如 图 3-7 所 示 。 
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击 “连接 ” 


项 目 3_ 新 闻 信 息 绑 定 如 


六 SQ Queyl sd POI OR a C07 Adinitator (55) - Miorosof SQL Semver Maragemert StudioiEa) [到 


RR A i Sd) a Dl TE BO Pi 
I I CE S-- ET = 于 Ia 全 


昌国 ReporsererSsQLEXPRESS 
由 国 ReporserverSsQLEXPRESSTemppe 


图 3-7 新 建 SQL 脚本 
在 右 侧 的 SQL 脚本 编辑 区 中 输入 如 下 SQL 代码 : 


CREATE DATABASE STUDENT -- 创建 STUDENT 数据 库 
GO 


USE STUDENT -- 转 到 STUDENT 数据 库 
GO 
CREATE TABLE STUDENT -- 在 STUDENT 数 据 库 中 创建 表 STUDENT 


( 
Sno CHAR(5) PRIMARY KEY, 
Sname CHAR(10) NOT NULL, 
Ssex BIT, 
Sage INT, 
Sdept CHAR(15) 

) 


上 述 SQL 语句 创建 了 一 个 数据 库 Student， 并 在 该 库 中 创建 了 一 张 数据 表 Student， 其 
中 同样 包含 了 学 号 (Sno)、 姓 名 (Sname)、 性 别 (Ssex )、 年 龄 (Sage)、 院 系 (Sdept) 等 
5 项 基础 学 生 信息 。 这 里 ， 读 者 只 要 掌握 使 用 SQL 语句 创建 数据 库 和 数据 表 的 基本 操作 就 
行 ， 关 于 其 具体 语法 将 在 项 目 4 中 进行 介绍 。 

单 击 工 具 栏 中 的 主 势 50 按钮 ， 运 行 SQL 语句 ， 即 可 完成 数据 库 与 数据 表 的 创建 。 


3.1.2 SQL Server 创建 存储 过 程 


存储 过 程 (Stored Procedure) 是 一 组 能 完成 特定 功能 的 SQL 语句 ， 经 编译 后 存储 在 数 
据 库 中 。 用 户 通过 指定 存储 过 程 的 名 字 并 给 出 参数 (如 果 该 存储 过 程 带 有 参数 ) 来 执行 它 


1. 为 什么 要 用 存储 过 程 


存储 过 程 具有 以 下 优点 。 

光 ”存储 过 程 允许 进行 标准 组 件 式 编程 (模块 化 设计 ) 

存储 过 程 在 被 创建 以 后 ， 可 以 在 程序 中 被 多 次 调用 ， 而 不 必 再 重新 编写 该 存储 过 程 的 
SQL 语句 。 开 发 者 可 随时 对 存储 过 程 进行 修改 ， 而 不 会 对 应 用 程序 源 代码 造成 影响 〈 因 为 
应 用 程序 源 代 码 中 只 包含 存储 过 程 的 调用 语句 )， 从 而 极 大 地 提高 了 程序 的 可 移植 性 。 
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【学 孙 芒 洪福， 全 汶 由 总 玲 信 懂 席 光 站 本 叶 直 】 
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党 ”存储 过 程 能 够 实现 快速 执行 

如 果 某 一 操作 包含 有 大 量 的 Transaction SQL 代码 ， 或 需要 被 多 次 执行 ， 那 么 为 其 创建 
存储 过 程 要 比 创建 批 处 理 程序 便捷 得 多 ， 而 且 前 者 的 执行 速度 要 快 很 多 。 这 是 因为 存储 过 
程 是 预 编译 的 ， 在 首次 运行 后 ， 查 询 优化 器 会 对 其 进行 分 析 和 优化 ， 并 给 出 最 终 被 保存 在 
系统 表 中 的 执行 计划 ; 而 批 处 理 的 Transaction SQL 语句 在 每 次 运行 时 都 要 进行 编译 和 优化 ， 
因此 速度 上 要 相对 慢 一 些 。 

党 ”存储 过 程 能 够 减少 网 络 流量 

对 于 一 个 针对 数据 库 对 象 的 操作 ， 如 查询 修改 某 个 数据 ， 如 果 这 一 操作 所 涉及 的 
Transaction SQL 语句 被 组 织 成 一 个 存储 过 程 ， 那 么 当 用 户 调用 该 存储 过 程 时 ， 网 络 中 传送 
的 只 是 该 调用 语句 (否则 将 是 多 条 SQL 语句 )， 因 此 能 大 大 减少 网 络 流量 ， 降 低 网 络 负载 。 

党 ”存储 过 程 可 被 作为 一 种 安全 机 制 来 充分 利用 

这 是 因为 对 某 一 存储 过 程 的 执行 权限 进行 限制 后 ， 可 以 对 相应 的 数据 访问 权限 进行 
限制 。 

2. 创建 存储 过 程 


在 SQL Server 中 , 存储 过 程 分 为 两 类 : 系统 提供 的 存储 过 程 和 用 户 自 定义 的 存储 过 程 。 

打开 SQL Server 2012 的 管理 工具 ， 选 中 需要 创建 存储 过 程 的 数据 库 ， 展 开 “ 可 编程 
性 ”选项 ， 右 击 “ 存 储 过 程 ”选项 ， 在 弹出 的 快捷 菜单 中 选择 “新 建 存储 过 程 ”命令 ， 将 
在 右 侧 打开 一 个 编辑 窗口 ， 里 面 显 示 的 即 是 系统 生成 的 SQL Server 创建 存储 过 程 的 语句 。 

将 存储 过 程 的 名 字 、 参 数 、 操 作 语 句 写 好 后 ， 单 击 进行 语法 分 析 。 如 果 没有 错误 ， 即 
可 按 F5 键 运行 。 此 时 ， 一 个 存储 过 程 即 创建 完毕 。 

创建 存储 过 程 的 语法 格式 如 下 : 

CREATE PROCEDURE 存储 过 程 名 

参数 1, 参数 2，… 

4 参数 1, 参数 2，… 


Set 参 数 1 的 初始 值 
Set 参 数 2 的 初始 值 


Begin trascation 
Commit trascation 
Return 


CREATE PROCEDURE 语句 表示 这 里 创建 了 一 个 存储 过 程 ， 后 面 的 参数 列表 表示 需要 
传 入 的 参数 ， 如 果 有 多 个 参数 ， 参 数 间 用 去 号 隔 开 。As 之 后 的 语句 为 主体 语句 ， 即 该 存储 
过 程 要 执行 的 操作 。 首 先是 定义 和 初始 化 内 部 参数 ， 然 后 是 具体 的 操作 语句 ， 最 后 通过 
Return 语句 返回 。 

注意 ， 在 SQL Server 中 使 用 Declare 语句 声明 变量 时 ， 必 须 在 变量 前 加 上 @ 符 号 。 
例如 : 

-声明 一 个 变量 


Declare @I INT 


一 -进行 变量 赋值， 使 用 set 关 键 字 
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set @I = 30 
一 -声明 多 个 变量 


Declare Q@s varchar(10),@a INT 
以 下 是 一 个 基本 存储 过 程 的 代码 : 
CREATE PROCEDURE Get Data 
( 
@Dealer ID VARCHAR(50) 
) 
AS 
SELECT * FROM myData WHERE Dealer ID = @Dealer ID 


任务 实施 


本 任务 将 在 数据 库 中 创建 新 闻 信息 表 ， 并 编写 读 取 新 闻 信息 的 存储 过 程 。 

步骤 1: 在 SQL Server 中 创建 WebShop 数据 库 。 

打开 SQL Server Management Studio Express， 启 动 SQL Server 2012 数据 库 管 理 系统 ， 
参考 前 面 的 方法 创建 WebShop 数据 库 ， 如 图 3-8 所 示 。 

步骤 2: 在 WebShop 数据 库 中 创建 news 表 。 

选取 WebShopDB 数据 库 ， 新 建 查询 ， 并 输入 如 下 SQL 语句 ， 如 图 3-9 所 示 。 


60 
SET QUOTSD_IDERTIFIER ON 
60 

abo]. [news] 


I ReportServer$SQLEXPRESS 
D ReportServer$SQLEXPRESSTempDB A 
9 WebDB )_INDEX = OFF, STATISTICS_NORECOMWPUTE = OFF, JGNORE_DUP_KEY = OFF| 


] TEXTINWAGE_ON [PRIMARY] 
webshopD8 es 


图 3-8 创建 WebShopDB 数据 库 图 3-9 输入 新 建 news 表 的 SQL 语句 
新 建 news 表 的 SQL 语句 为 : 


USE [WebSshopDB] 

GO 

SET ANSI NULLS ON 

GO 

SET QUOTED IDENTIFIER ON 

GO 

CREATE TABLE [dbo] . [news]( 
[id] [int] IDENTITY(1,1) NOT NULL, 
[typeid] [int] NULL, 
[title] [nvarchar] (50) NULL, 
[newscontent] [text] NULL, 
[picture] [nvarchar] (50) NULL, 
[laiz] [nvarchar] (50) NULL, 


【党 给 这 招 字 .从 尝 点 泌 玛 臣 沿 讽 妆 训 扣 a】 
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[joindate] [datetime] NULL, 

[changedate] [datetime] NULL, 

[imgurl] [nvarchar] (50) NULL, 

[imgtext] [nvarchar] (50) NULL, 

[imglink] [nvarchar] (50) NULL, 

[imgAlt] [nvarchar] (50) NULL, 

CONSTRAINT [PK news] PRIMARY KEY CLUSTERED 

( 

[id] ASC 

)WITH (PAD INDEX = OFF, STATISTICS NORECOMPUTE = OFF, IGNORE DUP KEY = OFF, 
ALLOW ROW LOCKS = ON, ALLOW PAGE LOCKS = ON) ON [PRIMARY] 
) ON [PRIMARY] TEXTIMAGE ON [PRIMARY] 
GO 


步骤 3: 在 news 表 中 插入 样 例 数据 。 
右 击 dbonews 选项 ， 在 弹出 的 快捷 菜单 中 选择 “编辑 前 200 行 ”命令 ， 然 后 在 news 
表 中 输入 样 例 数据 ， 如 图 3-10 所 示 。 


WB webps 
国 WebshopDe 


3 riersoiec OO tar 


m9 dboacmn) wine 


日 
日 加 而 加 
四 各 同 X 国 


8 1000 FW) 
i 200 行 日 
二 本 有 下 5) 


图 3-10 插入 样 例 数据 


步骤 4: 编写 读 取 新 闻 信息 的 存储 过 程 。 
在 WebShopDB 数据 库 的 “可 编程 性 ”选项 下 右 击 “ 存 储 过 程 ”选项 ， 选 择 “ 新 建 存 
储 过 程 ”快捷 命令 ， 如 图 3-11 所 示 。 


Webshopos 
3 加 数据 志 关 系 图 
向 束 
向 系统 表 
3 Ga FleTables 
9 9 dboadmin 


四 日 dbonews 


田 向 视 加 
田 入 同义词 
向 可 闹 尾 性 


= = EEE 


四 加 系统 + 新 建 存储 过 程 (N).… 


图 3-11 创建 读 取 新 闻 的 存储 过 程 
在 右边 的 编辑 区 中 输入 如 下 SQL 语句 : 


USE [WebshopDB] 

GO 

SET ANSI_ NULLS ON 

GO 

SET QUOTED IDENTIFIER ON 

GO 

Create PROCEDURE [dbo].[sp getdatabyCondition] 
@tablename nvarchar (50), 
@conlumns nvarchar(200), 
@condition nvarchar (200) 
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RS 

BEGIN 
DECLARE @sql nvarchar (1000) 
SET @sql='select '+ @conlumns +' from '+@tablename+ ' ' +@condition 
EXEC (@sql) 

END 


任务 2 使 用 C# 编 写 数据 库 读 操作 


数据 库 具 有 强大 、 灵 活 的 后 端 数据 管理 与 存储 能 力 。 本 任务 中 ， 将 根据 ADO.NET 对 
象 ， 用 C# 编 写 代码 ， 读 取 新 闻 表 中 的 信息 。 

前 面 介绍 过 ， 信 息 读 取 的 过 程 就 是 通过 高 级 语言 (如 C#) 来 操作 后 台数 据 库 的 过 程 。 
在 C# 中 操作 数据 库 ， 可 利用 ASP.NET 提供 的 ADO.NET 组 件 库 来 实现 信息 读 取 。 下 面 就 
来 进行 详细 介绍 。 


相关 知识 
3.2.1 认识 ADO.NET 


ADO.NET 的 名 称 起 源 于 ADO (ActiveX Data Objects)， 是 一 个 COM 组 件 库 ， 用 于 在 
Microsoft 技术 中 访问 数据 。 之 所 以 使 用 ADO.NET 这 个 名 称 ， 是 因为 Microsoft 希望 表明 ， 
这 是 在 .NET 编程 环境 中 优先 使 用 的 数据 访问 接口 。 

ADO.NET 是 一 组 向 .NET Framework 程序 员 公开 数据 访问 服务 的 类 。 它 提供 了 对 关 
系数 据 、XML 和 应 用 程序 数据 的 访问 ， 因 此 是 .NET Framework 中 不 可 缺少 的 一 部 分 。 
ADO.NET 支持 多 种 开发 需求 ， 包 括 创 建 由 应 用 程序 、 工 具 、 语 言 或 Internet 浏览 器 使 用 
的 前 端 数据 库 客 户 端 和 中 间 层 业务 对 象 。 

从 架构 上 来 说 ，ADO.NET 体系 分 为 两 类 。 

学 ”连接 处 理 : 该 部 分 用 于 处 理 与 数据 库 连接 、 获 取 数 据 源 的 数据 或 者 执行 数据 库 


命令 。 
学” 断 开 处 理 : 该 部 分 用 于 处 理 离线 编辑 与 处 理 数据 ， 在 处 理 完成 后 交 由 连接 处 理 ， 
进行 数据 更 新 。 


注意 : 除了 DataAdapter 对 象 〈 该 对 象 用 于 在 连接 与 断 开 之 间 保 持 桥接 作用 ) 外 ， 大 多 
数 类 都 属于 这 两 大 类 中 的 某 一 类 。 

ADO.NET 的 总 体 结构 图 如 图 3-12 所 示 。 

由 图 3-12 可 以 看 出 ，ADO.NET 通过 数据 处 理 ， 将 数据 访问 分 解 为 多 个 可 以 单独 使 用 
或 一 前 一 后 使 用 的 不 连续 组 件 。 

通过 使 用 不 同 的 数据 提供 程序 , ADO.NET 可 以 访问 不 同 的 数据 库 模 型 。 数据 提供 程序 
提供 了 访问 数据 库 、 执行 SQL 语句 以 及 接收 数据 库 数据 的 命令 , 从 而 在 数据 库 和 ASP.NET 
应 用 程序 之 间架 起 了 一 座 桥梁 。.NET Framework 中 共 内 置 了 4 类 数据 提供 程序 ， 如 图 3-13 
所 示 。 本 项 目 中 采用 的 是 SQL Server 数据 库 。 


ys 


【学 蒸 六 洪福 芒 汶 由 总 下 全 戏 项 举 中 本 叶 直 】 


【学 孙 芒 洪福 全 汶 由 总 玲 全 懂 项 党 站 二 叶 直 】 
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ADO.NET 连 接 处 理 部 分 断 开 连 接 数据 集 
.NET Framework 数 据 提供 程序 DataSet 对 象 
i 全 
Connection 连 接 类 patahdapter 适 配器 DataTableCollection 集 合 
DataTable 对 象 
连接 
连接 事务 ||| selectComand DataRovCollection 
Connection 连 接 类 InsertComand DataColumnCollection 
连接 事务 ||| UpdateConmand ConstraintCollection 
DataReader 数 据 读 取 器 DeleteCommand DataRelationCollection 
CU 3 
数据 库 


图 3-12 ADO.NET 总 体 结构 图 


ASP.NET 应 用 程序 


SQL Server OLEDB ODBC Oracle 
提供 者 


ss—3 
数据 库 
图 3-13 ADO.NET 提供 者 模型 图 


ADO.NET DataSet 是 专门 为 独立 于 数据 源 的 数据 访问 设计 的 ， 因 此 可 以 用 于 不 同 的 数 
据 源 ， 如 用 于 XML 数据 ， 或 用 于 管理 应 用 程序 的 本 地 数据 。DataSet 包含 一 个 或 多 个 
DataTable 对 象 的 集合 ， 这 些 对 象 由 数据 行 、 数 据 列 及 DataTable 对 象 中 数据 的 主键 、 外 键 、 
约束 、 关 系 等 信息 组 成 。 

通常 情况 下 ， 访 问 数据 库 并 获取 数据 的 过 程 分 为 以 下 3 步 。 

(1) 应 用 程序 与 数据 库 建立 连接 。 通 常 使 用 SqlConnection 对 象 来 连接 数据 库 。 

(2) 向 数据 库 下 达 SQL 语句 或 执行 存储 过 程 的 命令 。 这 里 要 用 到 SqlCommand 对 象 ， 
通过 它 来 可 以 执行 SQL 语句 或 调用 存储 过 程 。 

(3) 从 数据 库 中 返回 结果 ， 并 进行 处 理 。 对 返回 结果 的 操作 通常 分 为 两 类 : 一 是 用 
SqlDataReader 对 象 直 接 一 行 一 行 地 读 取 数据 集 ; 二 是 DataSet 联合 SqlDataAdapter 对 象 来 
操作 数据 库 。 

下 面 就 来 介绍 这 些 在 数据 读 取 过 程 中 用 到 的 对 象 。 


Ss Dracie 
的 数据 源 


的 数据 源 人 数据库 
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3.2.2 ”使 用 SqlConnection 对 象 连接 数据 库 


网 站 开发 中 ， 当 需要 与 数据 存储 进行 交互 时 ， 首 先 要 建立 应 用 程序 与 数据 源 之 间 的 连 
接 。ADO.NET 提供 了 Connection 对 象 用 于 创建 应 用 程序 与 数据 库 的 连接 。 

SqlConnection 类 是 用 于 建立 与 SQL Server 服务 器 连接 的 类 。 其 命名 空间 为 System. 
Data.SqlClient.SqlConnection。 为 了 构建 一 个 ASP.NET 应 用 程序 到 数据 库 的 连接 ， 需 要 为 
SqlConnection 对 象 提供 一 个 到 指定 数据 源 的 连接 字符 串 。 

首先 ， 需 要 实例 化 连接 对 象 ， 并 打开 连接 。 代 码 如 下 : 


SqlConnection sqlCnt = new SqlConnection(connectString) 7 
sqlCnt.Open(); 


使 用 完毕 后 ， 还 需要 关闭 连接 对 象 。 代 码 如 下 : 


SqlCnt .Close (); 


3.2.3 ”使 用 SgqlCommand 对 象 操作 数据 库 


在 应 用 程序 与 数据 库 建 立 连 接 后 ， 接 下 来 需要 执行 从 数据 库 中 读 取 、 添 加 、 更 改 、 删 
除数 据 的 操作 。ADO.NET 中 ， 使 用 Command 对 象 向 数据 库 下 达 SQL 指令 ， 以 及 从 数据 
库 中 获取 查询 结果 等 。 

SqlCommand 对 象 的 命名 空间 为 System.Data.SqlClient,SqlCommand。 下 面 来 对 其 进行 
详细 介绍 。 

1. SqlCommand 的 常用 属性 和 方法 


SqlCommand 对 象 的 常用 属性 如 下 所 示 。 

党 ”ActiveConnection: 获取 或 设置 与 Command 对 象 关联 的 已 打开 的 连接 对 象 。 

学 ”CommandText: 获取 或 设置 要 对 数据 源 执行 的 SQL 语言 、 存 储 过 程 名 或 表 名 。 

学 ”CommandTimeOut: 获取 或 设置 在 终止 对 执行 命令 的 尝试 并 生成 错误 之 前 的 等 待 

时 间 。 

学 ”CommandType: 获取 或 设置 Command 对 象 要 执行 命令 的 类 型 。 

学 Connection: 获取 或 设置 此 Command 对 象 使 用 的 Connection 对 象 的 名 称 。 

学 ”Name: 指定 Command 对 象 的 名 字 。 

学 “Parameters: 获取 Command 对 象 需要 使 用 的 参数 的 集合 。 

注意 ，CommandType 属性 用 来 获取 或 设置 Command 对 象 要 执行 命令 的 类 型 ， 默 认 值 
为 Text。 当 针对 SQL 语句 进行 操作 时 ， 代 码 如 下 : 

command .CommandTyYPe = CommandType.Text; 

当 针 对 存储 过 程 进行 操作 时 ， 代 码 如 下 : 


command .CommandType = CommandType.StoredProcedure; 


当 针对 整 张 表 进行 操作 时 ， 代 码 如 下 : 


人 


【 尝 奏 车 灌 村 .六 济 点 茵 坊 我 山高 半圆 】 


【 尝 玲 六 洪福， 仿 泣 定 关 玲 全 汇 席 谷中 本 呈 可 】 


78 


SqlDataReader。 


忆 动态 网 站 建设 案例 教程 (ASP.NET) 
command .CommandType = CommandType.TableDirect; 


实例 化 一 个 SqlCommand 对 象 的 操作 方式 为 : 
SqlCommand command = new SqlCommand () 
command .Connection = sqlCnt; // 绑 定 SqlConnection 对 象 


也 可 以 直接 从 SqlCommandConnection 进行 创建 : 

SqlCommand command = sqlCnt.CreateCommand () 

SqlCommand 对 象 的 常用 方法 如 下 所 示 。 

学 ”ExecuteNonQuery: 执行 SQL 语句 ， 并 返回 受 影响 的 行 数 。 

学 ”ExecuteScalar: 执行 查询 ， 并 返回 查询 所 得 结果 集中 的 第 一 行 第 一 列 ， 而 忽略 其 
他 列 或 行 。 

学 ”ExecuteReader: 执行 返回 数据 集 Select 语句 。 

2. SqlCommand 的 常用 操作 示例 


SqlCommand 对 象 可 以 根据 指定 SQL 语句 的 功能 ， 来 选择 SelectCommand 、Insert 


Command、UpdateCommand 和 DeleteCommand 命令 。 


执行 SQL 语句 时 ， 代 码 如 下 : 


SqlCommand cmd = conn.CreateCommand () // 创 建 SqlCommand 对 和 象 
cmd.CommandType = CommandType.Text; 

cmd.CommandText = "select * from products = @ID"; //SQL 语 名 
cmd.Parameters.Add("@ID", SqlDbType.Int); 

cmd.Parameters["@ID"] .Value = 1; // 给 SQL 语 名 的 参数 赋值 


调用 存储 过 程 时 ， 代 码 如 下 : 

SqlCommand cmd = conn.CreateCommand(); 

cmd.CommandType System.Data.CommandTYPe .StoredProcedure; 
cmd.CommandText = "存储 过 程 名 "; 


调用 整 张 表 时 ， 代 码 如 下 : 

SqlCommand cmd = conn.CreateCommand(); 

cmd.CommandType = System.Data.CommandType.TableDirect; 
cmd.CommandText = " 表 名 "7 


于 


3.2.4 使 用 SqlDataReader 对 象 读 取 数 据 


用 于 读 取 数 据 的 对 象 主要 有 两 类 : DataReader 和 DataSet。 
DataReader 对 象 是 数据 读 取 器 ， 它 以 基于 连接 的 、 快 速 的 、 未 缓冲 的 及 只 向 前 移动 的 


方式 来 读 取 数 据 ， 一 次 读 取 一 条 记录 ， 然 后 遍历 整个 结果 集 。 


SqlDataReader 对 象 常用 于 检索 大 量 数 据 。 其 命名 空间 为 System.Data.SqlClient. 


SqlDataReader 对 象 常用 的 属性 如 下 所 示 。 
学 ”FieldCount: 获取 当前 行 的 列 数 。 
学 ”RecordsAffected: 获取 执行 SQL 语句 所 更 改 、 添 加 或 删除 的 行 数 。 
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SqlDataReader 对 象 常用 的 方法 如 下 所 示 。 
学 ”Read: 使 DataReader 对 象 前 进 到 下 一 条 记录 。 
党” Close: 关闭 DataReader 实例 。 
党 ”Get: 用 来 读 取 数据 集 当前 行 中 某 一 列 的 数据 。 
其 中 ，Read() 方 法 的 返回 值 是 一 个 布尔 值 ， 作 用 是 前 进 到 下 一 条 数据 ， 并 一 条 条 地 返 
数据 。 当 布尔 值 为 真 时 执行 ， 为 假 时 跳出 。 例 如 : 
SqlCommand command = new SqlCommand () 
command .Connection = sqlCnt; 
command .CommandType = CommandTYPe .Text7 
command .CommandText = "Select * from Users"; 
SqlDataReader reader = command.ExecuteReader(); // 执 行 SQL， 返 回 一 个 “ 流 ” 


while (reader.Read()) 
{ 


五 


Console.Write (reader["username"]); // 打 印 出 每 个 用 户 的 用 户 名 
} 


DataReader 对 象 为 用 户 查 询 数 据 时 的 过 程 如 图 3-14 所 示 。 


由 
创建 连接 结束 
了 
打开 连接 关闭 连接 
下 
了 
创建 Command 对 象 关闭 DataReader 
人 
执行 Command 的 将 DataReader 绑 定 到 
ExecuteReader() 方 法 数据 控件 中 


图 3-14 DataReader 对 象 查询 数据 过 程 
3.2.5 ”使 用 DataSet 对 象 读 取 数据 


DataSet 是 ADO.NET 中 的 核心 概念 ， 是 支持 ADO.NET 断 开 式 、 分 布 式 数据 方案 的 核 
心 对 象 。DataSet 是 离线 数据 集 ， 用 来 将 数据 库 中 的 数据 读 取 到 内 存 中 。 

DateSet 对 象 可 以 包含 任意 数量 的 数据 表 ， 以 及 所 有 表 的 约束 、 索 引 和 关系 ， 相 当 于 一 
个 小 型 关系 数据 库 。 一 个 DataSet 对 象 包括 一 组 DataTable 对 象 和 DataRelation 对 象 。 其 中 
每 个 DataTable 对 象 由 DataColumn 、DataRow 和 DataRelation 对 象 组 成 。 多 个 DataTable 
之 间 具 有 一 些 主 从 关系 ， 这 些 关系 保存 在 DataSet 对 象 的 DataRelation 集合 中 。 


【 兰 涩 六 其 福全 立 生 着 淮 下 碟 开 共 只 朴 品 夏 】 


【党 给 营 操 信念 洋 点 溃 珊 宾 山 席 半 加 2 和】 
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下 面 首先 来 认识 几 个 与 DataSet 密切 相关 的 对 象 。 
1. SqlDataAdapter 对 象 


在 ADO.NET 中 ， 创 建 数据 集 DataSet 的 方法 有 多 种 ， 其 中 ， 可 以 通过 SqlDataAdapter 
对 象 ， 用 现 有 关系 数据 源 中 的 数据 表 填 充 DataSet。 
SqlDataAdapter 对 象 是 DataSet 对 象 和 数据 源 之 间 联 系 的 桥梁 。 大 多 数 情况 下 ， 使 用 
DataAdapter 从 数据 源 中 取出 数据 ， 直 接 填 充 到 DataSet 中 ， 这 样 可 以 从 数据 库 的 架构 中 获 
取 到 完整 的 表 、 关 系 以 及 约束 信息 。 除 此 之 外 ， 也 可 以 使 用 SqlDataAdapter 对 象 将 离线 状 
态 下 编辑 的 数据 更 新 回 数据 库 。 
SqlDataAdapter 的 命名 空间 为 System.Data.SqlClient.SqlDataAdapter。 
SqlDataAdapter 的 4 个 常用 属性 如 下 。 
学 ”myDataAdapterSelectCommand 属性 : SqlCommand 变量 ， 封 装 了 Select 语句 ， 用 
学 ”myDataAdapterInsertCommand 属性 : SqlCommand 变量 ， 封 装 了 Insert 语句 ， 用 
于 插入 数据 。 

学 “myDataAdapterUpdateCommand 属性 : SqlCommand 变量 ， 封 装 了 Update 语句 ， 
用 于 更 新 数据 。 

学 ”myDataAdapterDeleteCommand 属性 : SqlCommand 变量 ， 封 装 了 Delete 语句 ， 用 
于 删除 数据 。 

SqlDataAdapter 的 常用 方法 如 下 。 

学 ”myDataAdapterfill0: 将 执行 结果 填充 到 DataSet 中 、 隐 藏 打开 SqlConnection 并 执 
行 SQL 等 操作 。 

实例 化 SqlDataAdapter 对 象 的 代码 如 下 : 


SqlConnection sqlCnt = new SqlConnection (connectString) 

sqlCnt.Open(); 

// 创建 SqlCommand 

SqlCommand mySqlCommand = new SqlCommand(); 

mySqlCommand .CommandType = CommandType.Text; 

mySqlCommand .CommandText = "select * from product"; 

mySqlCommand .Connection = sqlCnt; 

// 创建 SqlDataAdapter 

SqlDataAdapter myDataAdapter = new SqlDataAdapter(); 
myDataAdapter.SelectCommand = mySqlCommand; /* 为 SqlDataAdapter 对 象 绑 定 所 要 执行 的 


SqlCommand 对 象 */ 

上 述 SQL 语句 可 以 简化 为 : 

SqlConnection sqlCnt = new SqlConnection(connectstring); 
sqlCnt .Open(); 


// 有 隐藏 了 SqlCommand 对 和 象 的 定义 ， 同 时 隐藏 了 SqlCommand 对 象 与 SqlDataAdapter 对 象 的 绑 定 
SqlDataAdapter myDataAdapter = new SqlDataAdapter ("select * from product", sqlCnt); 


2. SqlCommandBuilder 对 象 
SqlDataAdapter 对 DataSet 的 操作 (如 更 改 、 增 加 、 删 除 等 ) 仅 是 在 本 地 进行 修改 ; 若 
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提交 到 数据 库 中 ， 则 需要 使 用 SqlCommandBuilder 对 象 。 

SqlCommandBuilder 用 于 在 客户 端 编辑 完 数据 后 ， 整 体 一 次 更 新 数据 。 其 命名 空间 为 
System.Data.SqlClient.SqlCommandBuilder。 

SqlCommandBuilder 的 具体 用 法 如 下 : 


SqlCommandBuilder mySqlCommandBuilder = new SqlCommandBuilder (myDataAdapter); 
// 为 myDataRdapter 赋 予 SqlCommandBuilder 功 能 

myDataAdapter.Update (myDataSet，" 表 名 ") ;  ”/* 向 数据 库 提交 更 改 后 的 DataSet， 第 二 个 参数 为 
DataSet 中 的 存储 表 名 ， 并 非 数据 库 中 真实 的 表 名 ( 二 者 在 多 数 情况 下 一 致 ) */ 


3. DataSet 


DataSet 的 命名 空间 为 System.Data.DataSet。 
DataSet 的 常用 属性 如 下 所 示 。 


ie 

人 
os， 

人 


ie 
人 


Tables: 获取 包含 在 DataSet 中 的 表 的 集合 。 
Relations: 获取 用 于 将 表 链 接 起 来 并 允许 从 父 表 浏览 到 子 表 的 关系 的 集合 。 
HasEroors: 表明 是 否 已 经 初始 化 DataSet 对 象 的 值 。 


DataSet 的 常用 方法 如 下 所 示 。 


* 


* 
人 


os， 
人 


J 


J 


使 月 


Clear: 清除 DataSet 对 象 所 有 表 中 的 数据 。 

Clone: 复制 DataSet 对 象 的 结构 到 另外 一 个 DataSet 对 象 中 ， 复 制 内 容 包 括 所 有 
的 结构 、 关 系 和 约束 ， 但 不 包含 任何 数据 。 

Copy: 复制 DataSet 对 象 的 数据 和 结构 到 另外 一 个 DataSet 对 象 中 。 两 个 DataSet 
对 象 完 全 一 样 。 

CreateDataReader: 为 每 个 DataTable 对 象 返 回 带 有 一 个 结果 集 的 DataTableReader， 
顺序 与 Tables 集合 中 表 的 显示 顺序 相同 。 

Dispose: 释放 DataSet 对 象 占用 的 资源 。 

Reset: 将 DataSet 对 象 初始 化 。 


崩 DataSet 的 第 一 步 ， 就 是 将 SqlDataAdapter 返回 的 数据 集 〈 表 ) 填充 到 DataSet 对 


象 中 ， 代 码 如 下 : 
SqlDataaAdapter myDataAdapter = new SqlDataAdapter ("select * from product", sqlCnt); 
DataSet myDataSet = new DataSet (); // 创建 DataSet 
myDataAdapter.Fill (myDataSet，"Product"); /+ 将 返回 的 数据 集 作为 表 填 入 DataSet 中 ， 表 名 可 
以 与 数据 库 真 实 的 表 名 不 同 ， 并 不 影响 后 续 的 增 、 删 、 改 等 操作 */ 


(1) 访问 DataSet 中 的 数据 
示例 : 
SqlDataAdapter myDataAdapter = new SqlDataAdapter ("select * from product", sqlCnt); 


DataSet myDataSet = new DataSet (); 
myDataAdapter .Fil]l (myDataSet, "product"); 


DataTable myTable = myDataSet.Tables["product"]; 
foreach (DataRow myRow in myTable.Rows) { 
foreach (DataColumn myColumn in myTable.Columns) 


} 


Console .WriteLine (myRow[myColumn]); // 遍 历 表 中 的 每 个 单元 
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(2) 修改 DataSet 中 的 数据 
示例 : 
SqlDataAdapter myDataAdapter = new SqlDataadapter ("select * from product", sqlCnt); 


DataSet myDataSet = new DataSet () 
myDataAdapter.Fill (myDataSet, "Product") 


// 修 改 DataSet 

DataTable myTable = myDataSet.Tables["product"]; 

foreach (DataRow myRow in myTable.Rows) { 
myRow["name"] = myRow["name"] + "商品 "; 


1 


// 将 DataSet 的 修改 提交 至 数据 库 
SqlCommandBuilder mySqlCommandBuilder = new SqlCommandBuilder (myDataAdapter); 
myDataAdapter.Update (myDataSet, "product"); 


注意 : 在 修改 、 删 除 等 操作 中 ， 表 product 必须 定义 主键 ，select 的 字段 中 也 必须 包含 


主键 ， 否 则 会 提示 “对 于 不 返回 任何 键 列 信息 的 SelectCommand, 不 支持 UpdateCommand 
的 动态 SQL 生成 。” 错 误 。 


(3) 增加 一 行 数据 
示例 : 
SqlDataAdapter myDataAdapter = new SqlDataAdapter ("select * from product", sqlCnt); 
DataSet myDataSet = new DataSet (); 
myDataAdapter .Fill (myDataSet, "product"); 
DataTable myTable = myDataSet.Tables["product"]; 
// 添加 一 行 
DataRow myRow = myTable.NewRow(); 
myRow["name"] = "捷安特 "; 
myRow["price"] = 13.2; 
//myRow["id"] = 100; id 车 为 “自动 增长 ”， 此 处 可 以 不 设置 ， 即 便 设置 也 无 效 
myTable .Rows .Add (myRow); 
// 将 DataSet 的 修改 提交 至 数据 库 
SqlCommandBuilder mySqlCommandBuilder = new SqlCommandBuilder (myDataAdapter); 
myDataAdapter.Update (myDataSet, "product"); 


(4) 删除 一 行 数据 

示例 : 

SqlDataAdapter myDataAdapter = new SqlDataAdapter ("select * from product", sqlCnt); 
DataSet myDataSet = new DataSet (); 

myDataAdapter .Fil]l (myDataSet, "product"); 

// 删除 第 一 行 

DataTable myTable = myDataSet.Tables["product"]; 

myTable .Rows [0] .Delete(); 

SqlCommandBuilder mySqlCommandBuilder = new SqlCommandBuilder (myDataAdapter); 
myDataAdapter.Update (myDataSet, "product"); 


(5) 释放 资源 
资源 使 用 完毕 后 ， 应 及 时 关闭 连接 和 释放 资源 ， 具 体 方法 如 下 : 


myDataSet .Dispose(); // 释放 DataSet 对 象 
myDataAdapter.Dispose();  // 释放 SqlDataRdapter 对 象 
myDataReader .Dispose(); // 释放 SqlDataReader 对 象 
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sqlCnt.Close (); // 关闭 数据 库 连 接 
sqlCnt .Dispose(); // 释放 数据 库 连接 对 象 


DataSet 对 象 为 用 户 查 询 数据 时 的 过 程 如 图 3-15 所 示 。 


创建 DataAdapter 对 
象 


定义 DataSet 对 象 


执行 DataAdapter 对 
象 的 Fill () 方 法 


将 DataSet 中 的 表 绑 
定 到 数据 控件 中 


图 3-15 ”DataSet 对象 查询 数据 过 程 


任务 实施 


本 任务 将 根据 ADO.NET 对 象 ， 用 C# 编 写 代 码 ， 读 取 新 闻 表 中 的 信息 。 

步骤 1: 为 网 站 添加 数据 库 连 接 信息 。 

在 网 站 的 webCompany 中 添加 一 个 名 为 Web.Config 的 文件 ， 如 图 3-16 所 示 。 
编辑 加 入 数据 库 连 接 字 符 串 的 代码 如 下 : 


<?xml Version="1.0"” encoding="utf-8"?> 
<configuration> 
<connectionStrings> 
<add name="WebDBConnectionstring" connectionString="Data Source=teach\SQLEXPRESS; 
Initial Catalog=WebShopDB;Integrated Security=True" 
ProviderName="System.Data.SqlClient" /> 
</connectionstrings> 
<system.web> 
</system.web> 
</configuration> 


步骤 2: 编写 DAL 层 相 关 类 连接 和 读 取 数 据 的 方法 。 
打开 webCompany 网 站 根 目录 ,在 App_Code 目录 中 新 建 DAL 文件 夹 ， 然后 在 该 文件 
夹 中 新 建 一 个 SqlDataHelper 类 ， 如 图 3-17 所 示 。 
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4 © Di\webcompany\ 


b 国 App code 
，》 国 Images 同 解 志方 案 “webCompany”(1 个 项 目 ) 
》 国 login 4 © Di\webCcompany\ 
》 国 Scripts 4 国 App Code 
b Indexaspx 4 国 BLL 
D Indexhtml Ce CommTool.cs 
Dlisthtml ce UserBLLcs 
MD istz.html 4 面 DAL 
图 3-16 添加 数据 库 连 接 信息 图 3-17 编写 SqlDataHelper 类 代码 


SqlDataHelper 类 的 代码 如 下 : 


using System; 
using System.Collections.Generic; 
using System.Web; 
using System.Data; 
using System.Data.SqlClient; 
public class SqlDataHelper 
{ 
Public static string ConnString 
{ 
get 
{ 
return System.Configuration.ConfigurationManager.ConnectionStrings 
["WebDBConnectionString"] .ToString(); 


} 
public static DataTable SelectSqlReturnDataTable(string sql, CommandType type, 
SqlParameter[] pars) 
{ 
SqlConnection conn = new SqlConnection (ConnString); 
SqlDataAdapter sda = new SqlDataAdapter(sql, conn); 
if (pars != null && pars.Length > 0) 
{ 
foreach (SqlParameter p in pars) 
{ 
sda.SelectCommand.Parameters.Add (p); 
} 
} 
sda.SelectCommand.CommandType = type; 
DataTable dt = new DataTable(); 
sda.Fill (dt); 
return dt; 


} 

步骤 3: 编写 BLL 层 相 关 类 的 读 取 信息 方法 。 

用 同样 的 方法 新 建 一 个 CommTool 类 ， 并 编写 如 下 方法 : 
using System; 

using System.Collections.Generic; 

using System.Web; 

using System.Data; 


using System.Data.SqlClient; 
public class CommTool 
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/// 执行 一 个 查询 语句 ， 返 回 数据 表 对 象 
/// </summary> 
/// <param name="tablename"> 要 查询 的 表 或 视图 名 称 </param> 
/// <param name="columns"> 要 查询 的 列 </param> 
/// <param name="condition"> 条 件 </param> 
/// <returns>datatable</returns> 
public DataTable getDataBycondition (string tablename, string columns, string condition) 
{ 
SqlParameter[] pars = new SqlParameter[]{ 
new SqlParameter ("@tablename",tablename), 
new SqlParameter ("@conlumns",columns), 
new SqlParameter ("@condition",condition) 3 
return SqlDataHelper.SelectSqlReturnDataTable ("sp getdatabyCondition", 
CommandType. StoredProcedure, pars); 


任务 3 使 用 控件 进行 数据 绑 定 


数据 绑 定 是 指数 据 与 控件 相互 结合 的 方式 。 在 ASP.NET 中 ， 可 以 直接 使 用 ADO.NET 
访问 数据 库 ， 获 取 数 据 源 并 绑 定 到 服务 器 控件 上 。 
本 任务 就 将 在 主页 中 通过 相关 控件 和 代码 ， 动 态 地 绑 定 新 闻 信 息 。 


相关 知识 


3.3.1 数据 绑 定 


ADO.NET 中 虽然 提供 了 大 量 用 于 数据 库 连 接 、 数 据 处 理 的 类 库 , 但 却 没 有 提供 类 似 的 
DbText 组 件 、 DbList 组 件 、 DbLable 组 件 、DbCombox 组 件 等 。 要 想 把 数据 记录 以 ComBox、 
ListBox 等 形式 显示 处 理 ， 使 用 数据 绑 定 技术 是 最 为 方便 、 最 为 直接 的 方法 。 

所 谓 数据 绑 定 技术 ， 就 是 把 已 经 打开 的 数据 集中 的 某 个 或 某 些 字段 绑 定 到 组 件 某 些 属 
性 上 的 一 种 技术 。 说 得 具体 些 ， 就 是 把 已 经 打开 数据 的 某 个 或 者 某 些 字段 绑 定 到 Text、 
ListBox、ComBox 等 组 件 上 能 够 显示 数据 的 属性 上 面 。 当 对 组 件 完 成 数据 绑 定 后 ， 其 显示 
字段 的 内 容 将 随 着 数据 记录 指针 的 变化 而 变化 。 这 样 ， 程 序 员 就 可 以 定制 数据 的 显示 方式 
和 内 容 ， 从 而 为 以 后 的 数据 处 理 做 好 准备 。 

数据 绑 定 是 Visual C# 进 行 数 据 库 编程 的 基础 和 最 为 重要 的 一 步 。 只 有 掌握 了 数据 绑 定 
方法 ， 才 可 以 对 数据 集中 的 记录 进行 浏览 、 删 除 、 插 入 等 具体 的 操作 处 理 。 

根据 使 用 的 组 件 ， 可 将 数据 绑 定 分 为 两 种 ， 简 单 型 的 数据 绑 定 和 复杂 型 的 数据 绑 定 。 

所 谓 简单 型 的 数据 绑 定 ， 就 是 绑 定 后 组 件 显示 出 来 的 字段 只 是 单个 记录 。 这 种 绑 定 一 
般 使 用 在 显示 单个 值 的 组 件 上 ， 如 TextBox 组 件 和 Label 组 件 。 而 复杂 型 的 数据 绑 定 就 是 
绑 定 后 的 组 件 显示 出 来 的 字段 是 多 个 记录 ， 这 种 绑 定 一 般 使 用 在 显示 多 个 值 的 组 件 上 ， 如 
ComBox 组 件 、ListBox 组 件 等 。 

数据 绑 定 的 常见 使 用 方式 有 <%# 表达 式 %>、DataSource 属性 绑 定数 据 源 、 数 据 源 控 
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件 、Eval 方法 ， 下 面 分 别 介绍 这 几 种 绑 定 方式 。 
3.3.2 ”使 用 <%# 表达 式 %> 进 行 数 据 绑 定 


使 用 <%# 表达 式 %> 进 行 数据 绑 定时 ,无 论 是 对 html 标记 ,还 是 对 Web 服务 器 控件 ， 
都 是 实用 的 。 

1. 属性 绑 定 

例如 ， 将 html 文本 框 文本 绑 定 到 页 面 的 一 个 字段 name 上 〔 注 : 这 个 字段 必须 为 公有 
字段 或 受 保护 字段 ， 即 访问 修饰 符 为 public 或 protected)， 在 HTML 源 中 可 以 这 样 绑 定 。 


<INPUT type="text" value="<%# name $>"> 


2. 集合 绑 定 
(1) Web 服务 器 控件 绑 定 
示例 : 


<asp:ListBox id="Listl" datasource='<$%# myArray %>' runat="server"> 


上 述 代码 将 数组 myArray 绑 定 到 ListBox 控件 。 
(2) 表达 式 的 绑 定 

示例 : 

<%# ( customer.First Name + " " + customer.LastName ) $%> 
(3) 方法 的 绑 定 

示例 : 

<$%# GetBalance (custID) $%> 


3.3.3 ”使 用 DataSource 属性 绑 定数 据 源 


通常 使 用 DataSource 属性 进行 数据 源 绑 定 的 为 list-bound 控件 〈 连 接 到 数据 源 并 把 来 
自 数据 源 的 数据 显示 出 来 的 Web 服务 器 控件 )。 

常用 的 控件 有 如 下 几 类 。 

学 ”CheckBoxList: 复 选 框 组 ， 可 通过 数据 绑 定 动态 生成 。 
党。 GridView: 像 在 表格 中 一 样 ， 分 列 显示 数据 源 的 字段 。 
DataList: 用 来 显示 模板 定义 的 数据 绑 定 列表 。 
DropDownList: 单 选 下 拉 列 表 框 控件 。 
ListBox: 允许 单 选 或 多 选 的 列表 控件 。 

学 ”RadioButtonList: 可 通过 数据 绑 定 自动 生成 一 组 单 选 按钮 。 

DataSet 可 看 成 是 内 存 中 的 一 个 虚拟 数据 库 ， 只 要 将 list-bound 控件 的 DataSource 属性 
链接 到 数据 源 ，ASPNET 会 自动 给 list-bound 控件 填充 数据 。 

把 list-bound 控件 同一 个 DataSet 绑 定 在 一 起 时 ， 必 须 设置 以 下 属性 。 

党 “DataSource: 指定 包含 数据 的 DataSet。 


* 


te 


人 


+ 
人 


0 


人 
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学 ”DataMember: 因为 DataSet 中 可 能 有 多 个 数据 表 , 所 以 指定 要 显示 的 DataTable 表 名 。 
党 ”DataTextField: 指定 将 在 列表 中 显示 的 DataTable 字段 。 


学 ”DatavalueField: 指定 DataTable 中 的 某 个 字段 ， 此 字段 将 成 为 列表 中 被 选中 


hb 的 值 。 


使 用 DataSource 数据 源 后 ,还 需要 调用 list-bound 控件 的 DataBind 方法 来 连接 DataSet、 


DataReader 等 数据 源 。 例 如 : 


CheckBoxList .DataBind (); 


下 面 来 看 一 个 完整 的 绑 定 示例 〈 与 DataSet 数据 源 的 绑 定 ): 


private void Page Load(object sender, System.EventArgs e){ 


// 防 止 重复 绑 定 
if (!IsPostBack) { 


// 连 接 数 据 库 ， 并 从 数据 库 中 读 取 数据 存 入 DataSet 中 
string connString = System.Configuration.ConfigurationManager . 
ConnectionStrings ["connString"] .ToString () 7 
DataSet ds = new DataSet () : 

SqlDataAdapter ada = new SqlDataAdapter ("SELECT * FROM Products", connSstring); 


ada.Fill (ds); 
// 以 下 是 数据 绑 定 需要 的 代码 


this.DrListCompany.DataSource = ds; 

this.DrListCompany.DataMember = "Table"; 
this.DrListCompany.DataTextField = "ProductName"; 
this.DrListCompany.DataValueField = "ProductID"; 
this.DrListCompany.DataBind(); 


} 


DataTextFiled 和 DataValueField 两 个 属性 值 分 别 用 于 绑 定 不 同 的 字段 ， 前 者 表示 的 是 


控件 显示 出 的 字段 ， 后 者 表示 控件 代表 的 值 。 当 使 用 如 下 代码 : 
Response.Write (this.DrListCompany.SelectedValue) 

渝 出 所 选 控件 的 值 时 ， 打 印 的 是 DataValueField 属性 中 绑 定 的 字段 ProductID 的 值 。 

再 来 看 一 个 与 DataReader 数据 源 进行 绑 定 的 示例 : 


SqlCommand cmd=new SqlCommand ("SELECT upplierID,CompanyName FROM Suppliers", conn); 


conn.Open () 7 


SqlDataReaderreader=cmd.ExecuteReader (); 
this.DrListCompany.DataSource=reader; 
this.DrListCompany.DataTextField="CompanyName"; 
this.DrListCompany.DataValueField="SupplierID"; 


this.DrListCompany.DataBind(); 


// 绢 定 完成 后 才能 关闭 DataReader 对 象 和 连接 对 象 


reader.Close (); 
cmd.Connection.Close(); 


DataSet 与 DataReader 的 比较 如 表 3-1 所 示 。 


表 3-1 DataSet 与 DataReader 
DataSet DataReader 
读 或 写 数 据 只 读数 据 
包含 多 个 来 自 不 同 数据 库 的 表 单个 数据 库 中 的 表 
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【 尝 礁 这 灌 袜 .人 访 济 点 茵 坊 我 山 席 半圆】 


【 尝 玲 六 洪福 访 演 占 问 天 臣 沁 席 半 外 可 加 BN】 


和 动态 网 站 建设 案例 教程 (ASP.NET) 


续 表 
DataSet DataReader 
非 连接 模式 连接 模式 
绑 定 到 多 个 控件 只 能 绑 定 到 一 个 控件 
向 前 或 向 后 浏览 数据 只 能 向 前 浏览 数据 
较 慢 的 访问 速度 较 快 的 访问 速度 


3.3.4 ”使 用 数据 源 控件 


ASP.NET 内 置 了 多 种 数据 源 控件 ， 以 辅助 用 户 开发 复杂 的 数据 绑 定 页 面 和 数据 操作 功 
能 。 数 据 源 控件 允许 开发 人 员 连 接 至 多 种 数据 库 、 数 据 文件 (XML 文件 ) ， 并 提供 了 数据 
检索 及 数据 操作 等 多 种 复杂 的 功能 。 

使 用 数据 源 控件 可 以 极 大 地 减轻 开发 人 员 的 工作 ， 使 他 们 可 以 不 编写 任何 代码 或 者 只 
编写 很 少 的 代码 ， 就 可 以 完成 页 面 数据 绑 定 和 数据 操作 功能 。 

数据 源 控 件 封装 所 有 获取 和 处 理 数据 的 功能 ， 主 要 包括 连接 数据 源 ， 使 用 Select、 
Update、Delete 和 Insert 等 对 数据 进行 管理 。 

SqlDataSource 是 连接 SQL Server 数据 库 的 数据 源 控件 ， 可 以 将 数据 读 取 至 DataSet 或 
SqlDataReader 对 象 中 ， 并 提供 了 数据 排序 、 筛 选 和 分 页 功能 。 

数据 绑 定 控件 可 以 通过 自身 的 DataSourceID 属性 ， 将 数据 源 控件 设置 为 它 的 数据 源 。 


3.3.5 ”使 用 Eval 方法 绑 定数 据 源 


DataBinder.Eval 方法 在 运行 时 ， 使 用 反射 来 分 析 和 计算 对 象 的 数据 绑 定 表达 式 。 

名 称 说 明 : 

学 ”Eval(Object String): 在 运行 时 计算 数据 绑 定 表 达 式 。 

学 ”Eval(Object, String, String): 在 运行 时 计算 数据 绑 定 表达 式 ， 并 将 结果 的 格式 设置 

为 字符 串 。 

示例 : 

<%# DataBinder.Eval (Container.DataItem, "IntegerValue", "{0:c}") $> 

上 述 代 码 中 ， 格 式 化 字符 串 参 数 是 可 选 的 。 如 果 和 忽略 参 数 ，DataBinder.Eval 将 返回 对 
象 类 型 的 值 。 


4 © D:\webcompan 
任务 实施 a 
b 国 Images 
本 任务 的 目标 是 在 主页 中 通过 相关 控件 和 代码 动态 地 绑 定 。 ， 别 esm 
新 闻 信息 。 
步骤 1: 制作 动态 网 页 并 添加 datalist 控件 。 ln 


在 webCompany 目录 下 新 建 一 个 Index.aspx 文件 , 如 图 3-18 ”图 3-18 新 建 动态 网 页 
所 示 , 然后 将 Index.html 的 静态 代码 复制 到 Index.aspx 对 应 位 置 。 
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项 目 3 新 闻 信息 绑 定 如 


找到 如 下 静态 html 源 代码 : 


<1i><a href="#"> 公 司 成 功 完成 预期 销售 目标 </a><span> (2011.7.22)</span></1i> 
<1i><a href="#"> 公 司 成 功 完 成 预期 销售 目标 </a><span> (2011 .7.22)</span></1i> 
<1i><a href="#"> 公 司 成 功 完成 预期 销售 目标 </a><span> (2011.7.22)</span></1i> 
<1i><a href="#"> 公 司 成 功 完 成 预期 销售 目标 </a><span> (2011.7.22)</span></1i> 


蔡 换 为 ; 
<asp:DataList ID="DataListNews" runat="server" Width="531Px"> 
<ItemTemplate> 
<li><a href="NewsDetail.aspx?newsid=<%#Eval ("ID") %>"><%#Eval ("title")®%></a> 
<span> (<%# Convert .ToDateTime (Eval("joindate") ) .ToShortDateString()%>)</span></1i> 
</ItemTemplate> 
</asp:DataList> 
步骤 2， 编写 后 台 代码 。 
为 Index.aspx 的 Page_Load 方法 添加 如 下 代码 : 
CommTool commtool = new CommTool (); 
Protected void Page Load(object sender, EventArgs e) 
{ 

if (!IsPostBack) 

{ 

bindNewsList (); 

} 
} 
protected void bindNewsList() 
{ 
this.DataListNews .DataSource = commtool .getDataBycondition ("news", "top 4 ID,title, joindate", 
" order by id desc"); 
this.DataListNews.DataBind () 7 
上 


项 目 总 结 


本 项 目 中 ， 首 先 通过 SQL Server 创建 数据 库 和 数据 表 ， 并 添加 新 闻 数 据 ， 然 后 编写 读 
取 新 闻 的 存储 过 程 ， 最 后 用 C# 编 写 数据 库 读 操作 类 。 完 成 上 述 步 又 之 后 ， 在 主页 中 使 用 
Datalist 控件 进行 数据 绑 定 ， 完 成 新 闻 信 息 绑 定 。 


拓展 训练 


1. 描述 实现 主页 中 实现 动态 信息 绑 定 的 主要 步骤 。 

2. 为 WebShopDB 数据 库 添 加 一 个 产品 信息 表 Product。 
3. 用 C# 编 写 读 取 Product 表 中 信息 的 代码 。 

4. 在 主页 使 用 相关 控件 绑 定 产品 信息 。 
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【党 给 营 操守 :个 洋 点 溃 到 我 沿 讽 闪 小 】 
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三 层 架构 实现 登录 


项 目 5I 入 


为 确认 用 户 是 否 有 权限 管理 网 站 ， 必 须 设计 一 个 登录 页 面 ， 以 在 用 户 输 入 正确 的 用 户 
名 及 密码 后 ， 可 以 登录 后 台 管 理 系 统 ， 进 行 网 站 数据 的 管理 。 如 果 用 户 输入 的 用 户 名 和 密 
码 不 对 ， 系 统 将 拒绝 用 户 登 录 

要 完成 该 项 目 , 需要 借助 于 三 层 架 构 来 实现 数据 库 的 访问 ,三 层 应 用 架构 体系 ( 如 图 4-1 
所 示 ) 能 有 效 降低 层 与 层 之 间 的 依赖 性 ， 便 于 各 层 逻 辑 之 间 的 复 用 和 替换 ， 有 利于 并 行 开 


发 和 程序 标准 化 
本 


图 4-1 三 层 应 用 架构 图 


本 项 目 中 ， 三 层 架 构 的 实现 原理 如 下 

党 ”数据 访问 层 : 主要 负责 实际 数据 的 存储 和 检索 ， 即 对 数据 库 进行 增 、 删 、 改 、 查 
等 操作 。 

党 ”业务 逻辑 层 : 是 数据 访问 层 和 用 户 表示 层 之 间 的 纽带 ， 用 于 建立 实际 的 数据 库 连 
接 ， 可 根据 用 户 的 请 求生 成 检索 语句 或 更 新 数据 库 ， 并 会 把 结果 返回 给 前 端 界面 
显示 。 

党 ”用 户 表示 层 : 负责 处 理 用 户 的 输入 信息 和 向 用 户 输出 信息 ， 但 并 不 负责 解释 其 含 
义 。 出 于 效率 考虑 ， 该 层 在 向 业务 逻辑 层 传 递 输入 信息 之 前 ， 有 时 会 进行 合法 性 
验证 。 用 户 表 示 层 通常 采用 前 端 工具 进行 开发 。 

最 终 实现 的 用 户 登录 界面 如 图 4-2 所 示 。 


项 目 4 三 层 架构 实现 登录 忆 


哈 迪 斯 皮具 


图 4-2 用 户 登录 界面 


项 目 分 解 


本 项 目 将 通过 5 个 任务 ， 来 学 习 基 于 三 层 架 构 的 登录 页 面 的 设计 与 实现 方法 
任务 1 设计 登录 界面 

任务 2 编写 读 取 数据 库 管理 员 信息 的 存储 过 程 

任务 3 编写 数据 库 连 接 的 相关 类 

任务 4 实现 业务 逻辑 层 

任务 5 进行 对 象 封装 


任务 1 设计 登录 界面 


为 确认 用 户 是 否 有 权限 管理 网 站 ， 必 须 设 计 一 个 登录 页 面 ， 使 得 管理 员 能 通过 用 户 名 
及 密码 登录 管理 页 面 ， 而 普通 用 户 无 法 登录 。 本 任务 就 来 设计 这 人 么 一 个 登录 界面 。 

该 管理 界面 要 实现 的 主要 功能 为 ， 当 用 户 输入 登录 信息 后 ， 系 统 自动 将 输入 的 信息 和 
相关 用 户 数 据 库 中 的 内 容 进 行 比较 ， 如 果 和 数据 库 表 中 的 内 容 相符 ， 则 判断 用 户 身 份 ， 经 
过 身份 验证 后 ， 显 示 登 录 成 功 ， 否 则 ， 将 提示 登录 失败 。 
相关 知识 
4.1.1 制作 静态 、 动 态 网 页 

1. 制作 静态 网 页 Login.html 


下 面 将 在 Dreamweaver 中 制作 静态 登录 页 面 Login.html。 
(1) 在 Dreamweaver 中 新 建 一 个 网 页 ， 建 立 DIV， 插 入 背景 图 片 。 
选择 “插入 ”一 “布局 对 象 ”一 “Div 标签 ”命令 ， 将 打开 “插入 Div 标签 ”对 话 框 ， 
如 图 4-3 所 示 。 在 ID 编辑 框 中 输入 DIVBG, 然后 单 击 “ 新 建 CSS 规则 ”按钮 , 打开 “#DIVBG 
的 CSS 规则 定义 ”对 话 框 。 


【 尝 奏 六 尖 守信 漳 些 茵 到 站 凯 席 半 澡 加 3%】 


【 兰 淮 位 商社， 六 泣 岂 六 水 六 册 席 区 中 本 呈 夏 】 
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图 43 “插入 Div 标签 ”对 话 框 


在 如 图 4-4 所 示 的 “#DIVBG 的 CSS 规则 定义 ”对 话 框 中 设置 长 宽 、 背 景 等 参数 后 ， 
单 击 “ 确 定 ” 按 钮 。 


Width() ; [900 四 Poat OD) 

Heieht QD : [oq 四 CesrC) 
Padding margin 

司 全 部 相同 G) 

Top 到 ) 四 Top@) 

Bight ®) Ritht (©) 

Botton B) Botton QM) 

Left ) Left @) 


(a) 设置 长 宽 参数 


Background-color C): 加 


Backer ound-inage IL): [file:///C|/Docunents «| 


Backgr ound-repeat (B): lio-repead mw 


对 刊 尝 放 二 风 碌 笠 二 
测 沽 潭 弄 等 


Backgr ound-attachnent CD) 


Backgr ound-position (E) 四 


Backgr ound-position (LD) 


(b) 设置 背景 参数 
图 4-4 CSS 规则 定义 窗口 


(2) 使 用 同样 的 方法 ， 再 插入 几 个 浮动 的 DIV， 分 别 用 来 放置 用 户 名 、 密 码 的 Label、 
TextBox， 以 及 登录 Button 等 ， 最 终 效果 如 图 4-5 所 示 。 
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项 目 4 三 层 架 构 实现 登录 总 


图 4-5 登录 页 面 浮动 DIV 布局 图 
2. 制作 动态 网 页 


下 面 将 基于 静态 网 页 Login.html， 制 作 动态 网 页 Login.aspx。 
在 Visual Studio 2012 环境 下 打开 网 站 文件 ， 在 网 站 根 目录 下 新 建 Login 文件 夹 ， 用 以 
存放 登录 页 面 的 所 有 文件 ， 然 后 将 Login.html 文件 存放 到 Login 文件 夹 内 。 
(1) 右 击 Login 文件 夹 ， 添 加 以 Login.aspx 命名 的 Web 窗 体 ， 如 图 4-6 所 示 。 


模板 四 : 
Visual Studio 已 安装 的 模板 


Web 窗 体 刁 母 版 页 丽 Web 用 户 控件 
冯 Web 服务 EE 
如 全 局 应 用 程序 观 轧 Web 配置 文件 
司 XML 架构 国文 本 文件 
SQL 数据 库 下 
训 站 点 | Crystal 报表 
可 移动 Web 窗 体 站 报表 
于 移动 Web 用 户 控件 加 XSLT 文 件 
办 外 现 文件 局 训 览 器 文件 


我 的 模板 
| 搜索 联机 模板 .… 


Web 应 用 程序 的 窗 体 


名 称 [N]: Login.aspx 


生 言 员 : Visual ct 癌 。 回 将 代码 放 在 单独 的 文件 中 加 
选择 母 版 页 (9) 


图 4-6 添加 Web 窗 体 


(2) 打开 Login.html， 复 制 <head> 及 <body> 标 签 内 的 内 容 ， 覆 盖 Login.aspx 文件 中 原 
有 的 内 容 ， 注 意 添加 代码 <form id="forml" runat="server"> 以 及 更 换 页 面 title。 


4.1.2 利用 ASPNET 的 登录 控件 制作 登录 页 面 


ASPNET 类 库 中 包含 有 大 量 的 控件 ,为 ASPNET Web 应 用 程序 提供 可 靠 的 无 需 编程 的 
登录 解决 方案 。 其 中 ，Login 控件 一 般 用 于 验证 用 户 身份 。 

Login 控件 包含 用 于 用 户 名 和 密码 的 文本 框 和 一 个 复 选 框 ,该 复 选 框 让 用 户 指示 是 否 需 
要 服务 器 使 用 ASP.NET 成 员 资 格 存储 用 户 标 识 并 且 当 用 户 下 次 访问 该 站 点 时 自动 进行 身 
份 验证 。 


.3 


【党 码 营 操守 : 仿 注 点 溃 共 我 沿 讽 半 澡 入 BN】 


【学 隙 六 洪福 ， 芒 汶 由 总 玲 全 懂 项 闪闪 本 叶 二 】 
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Login 控件 有 用 于 自 定义 显示 、 自 定义 消息 的 属性 和 指向 其 他 页 面 的 链接 , 在 那些 页 面 
中 用 户 可 以 更 改 密码 或 找 回 忘 记 的 密码 。Login 控件 可 用 作 主 页 上 的 独立 控件 ， 或 者 使 用 
在 专门 的 登录 页 面 上 。 

利用 ASPNET 登录 控件 制作 登录 页 面 时 ， 需 要 先 设 计 好 页 面 的 背景 效果 ， 然 后 从 
ASP.NET 的 工具 箱 窗口 中 拖 动 Login 控件 到 设计 窗口 ， 如 图 4-7 所 示 ， 再 设置 Login 控件 
的 各 项 属性 。 其 中 ，Login 控件 的 DisplayRememberMe 属性 用 于 设置 是 否 显示 “下 次 记 住 
我 ” 复 选 框 。 


A ChangePassword 
VebParts 
TL 
Crystal Reports 
富 规 


图 4-7 Login 控件 
4.1.3 了 解 Page 类 


ASPNET 页 面 运行 时 ， 此 页 将 经 历 一 个 生命 周期 。 一 般 来 说 ， 页面 在 一 个 生命 周期 里 
要 经 历 页 请 求 、 开 始 、 页 初始 化 、 加 载 、 验 证 、 回 发 事件 处 理 、 呈 现 、 外 载 这 几 个 阶段 。 
在 页 面 生命 周期 的 各 个 阶段 中 ， 页 将 引发 可 运行 自己 的 代码 进行 处 理事 件 。 

对 于 控件 事件 ， 通 过 以 声明 方式 使 用 属性 (如 onclick) 或 使 用 代码 的 方式 ， 均 可 将 事 
件 处 理 程序 绑 定 到 事件 。 如 果 @Page 指令 的 AutoEventWireup 属性 设置 为 true (或 者 未 定 
义 该 属性 ， 因 为 该 属性 默认 为 true)， 页 事件 将 自动 绑 定 至 使 用 Page 事件 的 命名 约定 的 方 
法 (如 Page_Load 和 Page_Init)。 

下 面 简单 介绍 几 个 常用 的 Page 类 事件 。 


1. Page_Load 事件 


Page_Load 事件 在 服务 器 控件 加 载 Page 对 象 时 发 生 ， 即 当 系 统 加 载 页 面 时 ， 无 论 用 户 
是 初次 浏览 该 页 面 ， 还 是 通过 单 击 按钮 或 其 他 事件 再 次 调用 该 页 面 ， 都 会 触发 此 事件 。 
Page_Load 事件 主要 用 来 执行 页 面 设置 ， 在 其 事件 处 理 程序 中 既 可 以 访问 视图 状态 信息 ， 
也 可 以 利用 该 事件 生成 Post 数据 ， 还 可 以 访问 页 面 控件 层次 结构 内 的 其 他 服务 控件 。 

下 面 来 详细 讲述 Page Load 事件 。 例 如 ， 在 某 ASPNET 页 面 程序 中 有 如 下 代码 段 : 


Protected void Page Load(Object Sender, EventArgs E) 
| 


message .Text=" 来 访 的 时 间 是 "+DataTime.Now.ToString(); 
1 
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上 述 代 码 中 ， 通 过 Page_Load 事件 把 “来 访 的 时 间 是 ”字符 串 和 当前 服务 器 的 时 间 进 
行 了 连接 运算 。 页 面 程序 被 执行 后 ， 客 户 浏览 服务 器 的 时 间 将 被 显示 在 客户 端的 页 面 上 。 
注意 : Page_Load 事件 不 包含 对 象 引 用 或 是 事件 参数 。 

2. Page_Unload 事件 


Page_Unload 事件 通常 在 服务 器 控件 从 内 存 中 彼 载 时 发 生 。 也 就 是 说 , 编译 器 编译 运行 
完 页 面 程序 后 ， 页 面 的 全 部 内 容 将 会 被 送 往 输出 缓存 ， 此 时 系统 将 通过 Page_Unload 事件 
和 扼 载 留 在 内 存 中 的 服务 器 控件 或 元 素 。 

Page_Unload 事件 主要 执行 最 后 的 清理 操作 ， 如 关闭 文件 、 关 闭 数据 库 连接 、 丢 弃 对 象 
等 ， 以 便 断 开 与 服务 器 的 “紧密 ”联系 。 

如 下 例 所 示 ， 当 用 户 退 出 主页 时 ， 退 出 时 间 将 被 记 入 日 志文 件 。 


Protected void Page Unload (Object Sender, EventArgs E) 
{ 
FileStream fs=new FileStream(Server.MapPath("./my log.txt"),FileMode.Append, 
FileAccess .Write); 
Byte[]data=System.Text .Encoding.ASCII.GetBytes ("Quit Time: "+DateTime.Now.ToString()+ 
(char)13); 
fs.Write(data,0, (int)data.Length); 
fs.Flush(); 
fs.Close(); 
| 


3. Page_Init 事件 


Page_Init 事件 在 页 面 服务 器 控件 被 初始 化 时 发 生 ， 主 要 用 来 执行 所 有 创建 和 设置 实例 
所 需 的 初始 化 步 又。 该 事件 完成 的 是 系统 所 需 的 一 些 初始 化 设 定 ， 开 发 者 一 般 不 能 随意 改 
变 其 内 容 。 系 统 会 默认 调用 一 个 名 为 InitializeComponent() 的 过 程 来 完成 其 初始 化 工作 。 


任务 实施 


步骤 1: 使 用 Dreamweaver 制作 Login.html 文件 ， 效 果 如 图 4-5 所 示 。 
制作 Login.html 时 ，Login DIV 的 设置 如 下 : 


text-align:center; 
vertical-align:middle; 
margin-top:0px; 
margin-left: Opx; 
position:absolute; 
top:169px; 

left:269px 


“用 户 名 ”DIV 和 “密码 ”DIV 的 设置 如 下 : 


text-align:center; 
height:55px; 
width:400px; 


步骤 2: 打开 Login.html 文件 , 制作 页 面 Login.aspx。 注 意 加 上 <form id="form1" runat= 
"'server"> 这 行 代码 。 
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Login.aspx 的 参考 代码 如 下 : 


<%Q@Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="login Login"%> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.o0rg/1999/xhtml"> 


<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title> 登 录 页 面 </title> 
<style type="text/css"> 
#BodyBg { 
height: 800px; 
width: 1024px; 
background-image: url (images/login-page-bg.jpg); 
background-repeat: no-repeat; 
margin: auto auto; 
} 
#LoginDIV { 
height: 180px; 
width: 420px; 
} 
</style> 
</head> 


<body> 
<form id="forml" runat="server"> 

<div id="BodyBg" > 

<div id="LoginDIV" style="text-align:center; vertical-align:middle; 

margin-top:0px; 

margin-left:0px; position:absolute; top:169px; left:269px;" > 

<div style="text-align:center; height:55px; width:400px;" > 

<asp:Label ID="Labell" runat="server" Font-Size="Large" ForeColor="White" 

Height="20px" style="text-align:center" Text=" 用 户 名 : " 
Width="77px"></asp:Label> 

<asp:TextBox ID="TxtUsername" runat="server" Height="]l9px" Width="181lpx"> 

</asp:TextBox> 

</div> 

<div style="text-align: center; height: 55px; width: 400px;" > 

<asp:Label ID="Label2" runat="server" Font-Size="Large" ForeColor="White" 

Height="20px" style="text-align: center" Text=" 密 码 : " 
Width="77px"></asp:Label> 

<asp:TextBox ID="TxtPassword" runat="server" Height="19px" Width="181px" 

TextMode="Password"></asp:TextBox> 

</div > 

<div style="text-align: right"> 

<asp:Button ID="BtnLogin" runat="server" Text=" 登 录 " BackColor="#993300" 

Font-Bold="True" Font-Size="Medium" ForeColor="White" Height="29px" 
Width="83px" OnClick="BtnLogin Click" />gnbsp; 

</div> 

<div> 

<asp:Label ID="Lblmessage"” runat="server" Text=" 登 录 信息 " ForeColor="White"> 

</asp:Label> 

</div> 

</div> 

</div> 

</form> 
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</body> 
</html> 


步骤 3: 找到 login.asp 文件 ， 双 击 打 开 login.asp.cs 文件 ， 在 其 中 编写 后 台 代码 。 

这 些 代码 主要 实现 两 方面 的 功能 ， 一 是 用 户 表示 层 与 业务 逻辑 层 的 数据 传递 ， 二 是 管 
理 员 登录 成 功 与 否 的 信息 反馈 显示 。 

页 面 后 台 登 录 代 码 具 体 如 下 : 


using System; 

using System.Collections.Generic; 

using System.Web; 

using System.Web.UI; 

using System.Web.UI.WebControls; 

public partial class login Login : System.Web.UI.Page 
{ 


二 


Protected void Page Load(object sender, EventArgs e) 
Protected void BtnLogin Click(object sender, EventArgs e) 
| 


UserBLL userbll new UserBLL(); 
string username = this.TxtUsername.Text; 
string pwd = this.TxtPassword.Text; 
Users tuser = new Users(); 
tuser=userbl]l .getuserbyname (username, pwd); 
if ( (tuser.Username == username) && (tuser.Userpassword == pwd)) 
{ 
this.Lblmessage.Text = "登录 成 功 !"; 
// Response.Redirect ("~/Admin/AdminManager.aspx"); 
} 
else 
{ 
this.Lblmessage.Text = "登录 不 成 功 !"; 


} 
登录 页 面 的 最 终 应 用 效果 如 图 4-8 所 示 。 


哈 迪 斯 皮具 哈 迪 斯 皮具 


图 4-8 登录 页 面 效 果 图 


【之 站 基 基 翌 ， 六 六 是 总共 六 伐 席 学 可 器 朴 】 


【学 东 芒 洪福， 全 汶 年 总 丽人 玉民 项 区 站 二 叶 二 】 
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任务 2 编写 读 取 数据 库 管理 员 信 息 的 存储 过 程 


登录 页 面 主要 是 为 了 管理 员 登 录 服务 ， 为 了 检验 登录 有 效 与 否 ， 需 要 绑 定 管理 员 信息 
数据 表 。 管 理 员 用 户 的 基本 信息 是 预先 存储 在 数据 库 表 中 ， 其 中 包括 了 用 户 名 、 密 码 、 加 


入 时 间 等 最 基本 的 信息 字段 。 
本 任务 将 在 数据 库 中 创建 管理 员 信 息 表 ， 然 后 编写 读 取 管理 员 信息 的 存储 过 程 。 
相关 知识 


4.2.1 常用 SQL 语句 


SQL (Structured Query Language， 结 构 化 查询 语言 ) 是 一 种 功能 强大 的 语言 ， 是 一 种 
与 关系 数据 库 通信 的 方式 ， 用 户 通 过 它 可 以 定义 、 查 询 、 修 改 和 控制 数据 。 

SQL 语句 分 为 三 类 : 数据 定义 语言 (DDL) 、 数 据 操纵 语言 (DML) 和 数据 控制 语言 
(DCL) ， 其 含义 分 别 如 下 。 

学 ”数据 定义 语言 : 包括 CREATE、ALTER、DROP、DECLARE 语句 等 。 

学 ”数据 操纵 语言 : 包括 SELECT，DELETE，UPDATE，INSERT 语句 等 。 

学 ”数据 控制 语言 : 包括 GRANT，REVOKE，COMMIT，ROLLBACK 语句 等 。 

下 面 介 绍 SQL 语句 的 一 些 常 规 用 法 。 

(1) 创建 与 删除 数据 库 

创建 数据 库 的 语法 如 下 : 

create database database-name 

删除 数据 库 的 语法 如 下 : 

drop database dbname 

(2) 备份 数据 库 

备份 数据 库 的 语法 如 下 : 


--- 创建 备份 数据 的 device 
USE master 
EXEC sp addumpdevice 'disk', 'testBack', 'c:\mssql7backup\MyNwind 1.dat' 


二 = 江 抒 澡 价 
BACKUP DATABASE pubs TO testBack 


(3) 创建 与 删除 数据 表 
创建 新 数据 表 的 语法 如 下 : 
create table tabname (coll typel [not null] [primary key]l,col2 type2 [not null],...) 


根据 已 有 的 数据 表 创建 新 表 ， 格 式 如 下 : 


create table tab new like tab old 


使 用 已 有 数据 表 中 的 部 分 内 容 创 建新 表 ， 格 式 如 下 : 
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create table tab new as select coll,col2... from tab old definition only 
删除 数据 表 ， 格 式 如 下 : 
drop table tabname 


(4) 在 数据 表 中 增加 一 列 
在 数据 表 中 增加 一 列 的 语法 如 下 : 


Alter table tabname add column col type 


注意 : 增加 列 后 将 不 能 删除 。DB2 中 列 加 上 后 数据 类 型 也 不 能 改变 ， 唯 一 能 改变 的 是 


增加 varchar 类 型 的 长 度 。 
(5) 在 数据 表 中 添加 与 删除 主键 
添加 主键 的 语法 如 下 : 
Alter table tabname add primary key (col) 
删除 主键 的 语法 如 下 : 


Alter table tabname drop primary key (col) 


(6) 在 数据 表 中 创建 与 删除 索引 
创建 索引 的 语法 如 下 : 
create [unique] index idxname on tabname (col...) 
删除 索引 的 语法 如 下 : 
drop index idxname 
注意 : 索引 是 不 可 更 改 的 。 要 想 更 改 一 个 索引 ， 必 须 删除 后 重新 创建 。 
(7) 在 数据 表 中 创建 与 删除 视图 
创建 视图 的 语法 如 下 : 
Create view viewname as select statement 
删除 视图 的 语法 如 下 : 
drop view viewname 
(8) 几 个 基本 的 SQL 语句 
选择 数据 : 
select * from tablel where 范围 
插入 数据 : 
insert into tablel (fieldl,field2) values (valuel,value2) 
删除 数据 : 
delete from tablel where 范围 
更 新 数据 : 
update tablel set fieldl=valuel where 范围 


查找 数据 : 


select * from tablel where fieldl like '%valuel%®' 
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数据 排序 : 

select * from tablel order by fieldl,field2 [desc] 
计算 总 数 : 

select count as totalcount from tablel 
数据 求 和 : 

select sum(fieldl) as sumvalue from tablel 
数据 求 平均 值 : 

select avg (field1) as avgvalue from tablel 
查找 最 大 数据 : 

select max(fieldl1) as maxvalue from tablel 
查找 最 小 数据 : 


select min(fieldl) as minvalue from tablel 

(9) 几 个 高 级 查询 运算 词 

党” union: 合并 数据 表 tablel、table2 并 消去 重复 行 , 生成 一 个 新 表 。 如 果 有 union all， 
则 不 消除 重复 行 。 

光 except: 根据 数据 表 tablel1、table2 生成 一 个 新 表 ， 由 在 tablel 中 但 不 在 table2 中 
的 行 组 成 ， 消 除 重复 行 。 如 果 有 except all， 则 不 消除 重复 行 。 

党 ”intersect: 根据 数据 表 tablel 、table2 生成 一 个 新 表 ， 由 tablel 、table2 中 都 有 的 行 
组 成 ， 消 除 重复 行 。 如 果 有 intersect all， 则 不 消除 重复 行 。 

注意 ， 使 用 运算 词 的 几 个 查询 结果 行 必须 是 一 致 的 。 


4.2.2 ”编写 存储 过 程 


在 项 目 3 中 已 经 介绍 过 , 存储 过 程 是 一 组 能 完成 特定 功能 的 SQL 语句 , 经 编译 后 存储 


在 数据 库 中 ， 用 户 通 过 指定 存储 过 程 的 名 字 并 给 出 参数 ， 执 行 它 。 


其 程序 控制 语句 主要 包括 if…else、select…case、while。 下 面 来 看 一 个 示例 : 


/**if…else 语 句 实例 **/ 
DECLARE @d INT 


set @d=1 

IF @d = 1 BEGIN 
= 

PRINT ' 正 确 ' 
END 

ELSE BEGIN 
PRINT ' 错 误 ' 
END 


/**select…case 语 句 实例 **/ 
DECLARE Q@iRet INT, @PKDisp VARCHAR(20) 
SET @iRet = '1' 
Select @iRet = 
CASE 
WHEN Q@PKDisp = '—" THEN 1 


WHEN 
WHEN 
WHEN 
WHEN 
ELSE 

END 

/**while 循 环 语句 实例 **/ 

WHILE 条 件 BEGIN 

执行 语句 

END 

DECLRARE @i INT 

SET @i = 1 

WHILE @i<1000000 BEGIN 

set Q@i=@i+l 

END 


常用 存储 过 程 语 句 : 


/** 打开 要 创建 存储 过 程 的 数据 库 **/ 
Use Test 


/** 判 断 要 创建 的 存储 过 程 名 是 否 存在 **/ 


三 层 架 构 实现 登录 总 


if Exists(Select name From sysobjects Where name='csp AddInfo' And type='P') 


/** 删除 存储 过 程 **/ 
Drop Procedure dbo.csp AddInfo 


/** 创 建 存储 过 程 **/ 
Create Proc dbo.csp AddInfo 


/** 存储 过 程 参 数 **/ 
@UserName varchar(16), 
@Pwd varchar (50) ， 

@Age smallint, 

@Sex varchar (6) 

RS 


/** 存 储 过 程 语句 体 **/ 

insert into Uname (UserName, Pwd,Age,Sex) 
values (@UserName, @Pwd, @Age, @Sex) 

RETURN 


/** 执 行 **/ 
GO 


/** 执 行 存储 过 程 **/ 
EXEC csp_AddInfo 'Junn.A', '123456',20,' 男 ' 


任务 实施 


本 任务 将 在 数据 库 中 创建 管理 员 信息 表 ， 并 编写 读 取 管理 员 信息 的 存储 过 程 。 


步骤 1: 创建 WebShopDB 数据 库 。 


打开 SQL Server Management Studio Express， 启 动 SQL Server 2012 数据 库 管理 系统 ， 


创建 名 为 WebShopDB 的 数据 库 ， 如 图 4-9 所 示 。 


【 尝 奏 六 灌 人 守 访 漳 些 问 玛 站 岂 席 半 澡 加 3%】 
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四 [ReportServerTenpDB 
®test 
Ud YebshopDB 


图 4-9 新建 WebShopDB 数据 库 


步骤 2: 创建 admin 数据 表 。 
右 击 WebShopDB 数据 库 ， 新 建 查询 ， 并 输入 如 下 SQL 语句 ， 创 建 admin 表 。 


USE [WebShopDB] 


GO 


/*****#* Object: Table [dbo].[admin] 


SET ANSI NULLS ON 


GO 


SET QUOTED IDENTIFIER ON 


GO 


CREATE TABLE [dbo]. [admin] ( 

[id] [int] IDENTITY(1,1) NOT NULL, 
[username] [nvarchar] (50) NULL, 
[userpassword] [nvarchar] (50) NULL, 


GO 


[join time] 


[datetime] NULL, 


CONSTRAINT [PK admin] PRIMARY KEY CLUSTERED 


( 
[id] Asc 


)WITH (PAD INDEX = OFF, STATISTICS NORECOMPUTE = OFF, IGNORE DUP _ KEY 
OFF, ALLOW ROW LOCKS = ON, ALLOW PAGE LOCKS = ON) ON [PRIMARY] 
) ON [PRIMARY] 


Script Date: 2014/5/16 10:33:48 *w****/ 


单 击 工具 栏 中 的 时 热 和 5 按钮， 消息 框 提 示 “ 命 令 已 成 功 完 成 ”， 完 成 admin 表 的 创建 


过 程 。 


步骤 3: 创建 读 取 数据 库 管理 员 信 息 表 的 存储 过 程 。 

选择 WebShopDB 数据 库 ， 在 “可 编程 性 ”选项 下 右 击 “存储 过 程 ” 选 项 ， 
快捷 菜单 中 选择 “新 建 存储 过 程 ”命令 ， 在 右 侧 编辑 区 中 编写 读 取 数 据 库 管 理 员 信 息 表 的 
存储 过 程 。 


USE [WebShopDB] 


GO 


/****** Object:StoredProcedure [dbo]l. [admin getusersbynameandpwd] 


Date:2014/5/16 10:28:58 ******/ 
SET ANSI_ NULLS ON 


GO 


SET QUOTED IDENTIFIER ON 


GO 


Author: Zhousa 


Create date: 
Description: 


2013 年 月 日 :00:19 
用 户 登 录 验证 


在 弹出 的 


Script 


项 目 4 三 层 架构 实现 登录 如 


Qusername nvarchar (50), 
@pwd nvarchar (50) 
AS 
BEGIN 
SELECT 
id, 
username, 
userpassword, 
join time 
FROM 
admin 
WHERE username=@username AND userpassword=@pwd 
END 


步骤 4: 为 admin 表 添 加 初始 值 。 
右 击 admin 表 , 在 弹出 的 快捷 菜单 中 选择 “打开 表 ”命令 ,在 右 侧 编辑 区 中 添加 admin 
表 的 初始 值 ， 如 图 4-10 所 示 。 


表 - dbo. adain| 表 - dbo. adnin | 摘要 


id Username Userpassword join_time 
» admin admin 2014-4-29 00;0,,， 
2 abc abc 2014-4-29 00:0,,, 
米 | ACE NL NULL NL 


图 4-10 管理 员 表 初 始 值 


任务 3 编写 数据 库 连 接 的 相关 类 


数据 访问 层 (DAL) 的 任务 是 接受 对 数据 库 操纵 的 请 求 ， 实 现 对 数据 库 查询 、 修 改 、 
更 新 等 功能 ， 把 运行 结果 提交 给 业务 逻辑 层 。 

本 任务 中 ， 将 根据 ADO.NET 对 象 ， 用 C# 编 写 代 码 读 取 用 户 信 息 表 中 信息 ， 实 现 对 数 
据 库 的 访问 。 需 编写 SqlDataHelper 类 的 ExcuteSqlReturnReader 方法 ， 主 要 功能 是 对 给 定 
的 条 件 执行 SQL 语句 并 返回 SqlDataReader 对 象 ， 实 现 从 数据 库 管理 员 表 中 读 取 管 理 员 信 
息 ， 将 返回 的 数据 提交 给 业务 逻辑 层 供 其 使 用 。 

下 面 ， 就 来 介绍 与 数据 库 连接 相关 的 类 。 


相关 知识 
4.3.1 连接 数据 库 常 用 的 类 


在 项 目 3 中 详细 介绍 过 连接 数据 库 时 常用 到 的 类 ， 主 要 有 以 下 几 个 。 
党” SqlConnection 类 : 表示 一 个 到 SQL Server 数据 库 的 打开 的 连接 。 
学 ”SqlCommand 类 : 表示 要 对 SQL Server 数据 库 执行 的 一 个 Transact-SQL 语句 或 


【 兰 玲 芝 黄 福 ， 访 漳 点 茵 给 臣 油 讽 闪 小 贺 2】 
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ie 
人 


SqlParameter 类 : 这 是 一 个 用 来 操作 SQL 语句 中 的 参数 的 类 ， 作 用 就 是 将 SQL 
语句 中 的 参数 和 其 实际 值 产生 一 个 映射 关系 。 

SqlDataAdapter 类 : 这 是 DataSet 和 SQL Server 之 间 的 桥接 器 ， 用 于 检索 和 保存 
数据 。SqlDataAdapter 通过 对 数据 源 使 用 适当 的 Transact-SQL 语句 映射 Fill ( 它 
可 填充 DataSet 中 的 数据 以 匹配 数据 源 中 的 数据 ) 和 “Update〈 它 可 更 改 数据 源 中 
的 数据 以 匹配 DataSet 中 的 数据 ) 来 提供 这 一 桥接 。 当 SqlDataAdapter 填充 DataSet 
时 ， 它 为 返回 的 数据 创建 必需 的 表 和 列 〈 如 果 这 些 表 和 列 尚 不 存在 )。 

DataTable 类 : 表示 一 个 内 存 中 数据 表 。 


4.3.2 ”编写 数据 库 操 作 类 的 方法 
1. 方法 的 声明 
C# 中 ， 声 明 一 个 方法 的 语法 格式 如 下 : 


Returntype methodname (parameterlist) 


} 


// 方 法 的 主体 语句 块 


其 中 ，Returntype 是 返回 类 型 ， 指 定 方法 的 返回 结果 类 型 ， 可 以 是 int 或 string。 如 果 
不 返回 值 ， 须 用 关键 字 void 来 取代 返回 类 型 。 

Methodname 是 方法 名 , 调用 方法 时 使 用 .方法 名 遵循 的 标识 符 命名 规则 与 变量 名 一 样 ， 
方法 名 应 尽量 显示 方法 的 功能 。 如 ExcuteSqlRetumReader， 功 能 是 执行 给 定 SQL 语句 ， 返 
回 SqlDataReader 对 象 。 

parameterlist 是 参数 列表 ， 为 可 选项 ， 它 描述 了 可 以 传递 给 方法 的 信息 类 型 和 名 称 ， 写 


参数 时 ， 应 先 写 参数 类 型 ， 再 写 参 数 名 ， 多 个 参数 之 间 用 逗号 分 隔 开 。 
声明 方法 示例 : 
Void showresult (int answer, string name) 
{ 
// 显 示 答 案 
Returns 


} 


2. 编写 SqlDataHelper 类 的 主要 方法 


getdatacountbycondition: 对 给 定 的 条 件 执行 存储 过 程 getdatacountbycondition， 并 
返回 数据 的 条 数 。 

getpageindex: 对 给 定 的 条 件 执行 存储 过 程 sp_getdatebyPageIndex， 并 返回 分 页 数据 。 
getDataBycondition: 对 给 定 的 条 件 执行 存储 过 程 sp_getdatabyCondition， 并 返 世 
SqlDataReader 对 象 。 

SelectSqlRetumDataTable: 对 给 定 的 条 件 执行 SQL 语句 ， 并 返回 DataTable 对 象 。 
ExcuteSqlReturnReader: 对 给 定 的 条 件 执行 SQL 语句 , 并 返回 SqlDataReader 对 象 。 


项 目 4 三 层 架构 实现 登录 如 


党 ”ExcuteSQLReturnInt: 对 给 定 的 条 件 执行 SQL 语句 ， 并 返回 int 数据 。 
学 ”SelectSqlRetumObject: 对 给 定 的 条 件 执行 SQL 语句 ， 并 返回 object 对 象 。 
学 ”deletetable: 对 给 定 的 条 件 执行 存储 过 程 sp_deletetable， 并 返回 int 数据 。 


4.3.3 ”Web.config 文件 的 配置 


Web.config 文件 常用 来 定义 一 些 应 用 系统 关键 的 常量 和 用 户 的 访问 权限 设置 等 ， 如 关 
于 数据 库 的 连接 的 字符 串 等 。 


1. Web.config 文件 的 常用 标记 
Web.config 文件 的 常用 标记 有 4 个 ， 分 别 如 下 。 


(1) <configuration> 
该 标记 是 Web.config 文件 中 的 根 标记 。 文 件 中 的 所 有 数据 都 写 在 <configuration> 和 
</configuration> 标 记 之 间 。 
(2) <configSections> 
配置 文件 在 结构 上 分 为 声明 部 分 和 设置 部 分 ， 声 明 部 分 负责 定义 类 ， 设 置 部 分 为 声明 
部 分 定义 的 类 赋值 。 所 有 的 声明 部 分 都 写 在 <configSections> 和 </configSections> 标 记 之 间 。 
(3) <system.web> 
在 <system.web> 和 </system.web> 标 记 之 间 声 明 所 有 与 ASP.NET 相关 的 信息 。 常 用 的 有 
<httpRuntime>、<pages>、<appSettings>、<customErrors>、<sessionState> 和 <globalization>。 


(4) <connectionStrings> 
connectionStrings 元 素 为 ASPNET 应 用 程序 和 ASPNET 功能 指定 数据 库 连接 字符 
串 (名称 / 值 对 的 形式 ) 的 集合 。 

2. 子 元 素 与 父 元 素 

(1) 子 元 素 

党 ”Add: 向 连接 字符 串 集 合 添加 名 称 / 值 对 形式 的 连接 字符 串 。 

学 Clear: 移 除 所 有 对 继承 的 连接 字符 串 的 引用 , 仅 允 许 那些 由 当前 的 add 元 素 添 加 
的 连接 字符 串 。 

党 ”Remove: 从 连接 字符 串 集合 中 移 除 对 继承 的 连接 字符 串 的 引用 。 

(2) 父 元 素 

学 Configuration: 指定 公共 语言 运行 库 和 .NET Framework 应 用 程序 所 使 用 的 每 个 
配置 文件 中 均 需 要 的 根 元 素 。 

学 ”system.web: 指定 配置 文件 中 ASPNET 配置 设置 的 根 元 素 ， 并 包含 用 于 配置 
ASPNET Web 应 用 程序 和 控制 应 用 程序 行为 方式 的 配置 元 素 。 


3. 默认 配置 
默认 配置 代码 如 下 : 


<connectionstrings> 


【党 给 车 沽 袜 . 访 漳 点 茵 到 匠 沿 讽 交 训 可 加 BN】 
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<add 
name="LocalSqlServer" 
connectionSstring="data source=.\SQLEXPRESS; 
Integrated Security=SSPI;AttachDBFilename=|DataDirectory|laspnetdb .mdf; 
User Instance=true" 
providerName="System.Data.SsqlClient" 

/> 

</connectionstrings> 


任务 实施 


本 任务 的 目标 是 根据 ADO.NET 对 象 ， 用 C# 编 写 代 码 读 取 用 户 信 息 表 中 的 信息 ， 实 现 
对 数据 库 的 访问 。 

步骤 1: 为 网 站 添加 数据 库 连接 信息 。 

如 图 4-11 所 示 ， 在 网 站 的 webCompany 目录 中 添加 一 个 名 为 Web.config 的 文件 。 

编辑 加 入 数据 库 连 接 字符 串 如 下 : 


<?xm] version="]1.0" encoding="utf-8"?> 
<configuration> 
<connectionSstrings> 
<add 
name="WebDBConnectionString" 
connectionString="Data Source=teach\SQLEXPRESS; 
Initial Catalog=WebShopDB; Integrated Security=True" 
providerName="System.Data.SqlClient" /> 
</connectionStrings> 
<system.web> 
</system.web> 
</configuration> 


步骤 2: 编写 DAL 层 相 关 类 的 数据 连接 和 读 取 方法 。 
打开 webCompany 网 站 根 目录 ， 如 图 4-12 所 示 ， 在 App_Code 目录 中 新 建 DAL 文件 
夹 ， 然 后 在 该 文件 夹 下 新 建 一 个 SqlDataHelper 类 。 


【 尝 纶 营 操 村 ' 伟 洋 点 问 天 宾 内 讽 装 加 入 BN】 


4 © Di\webCcompany\ 解决 方案 资源 管理 器 
b 国 App code 己 | 忆 国 抽 | 厨 乱 
Ee PB Ci WwebConpany (vlest4)\ 
pb 国 login 日 -区 webConpany 
b 国 Scripts 由- Ca Main 
b A Indexaspx 日 GB Mpp_Code 
DN Index.html 由 局 B 
只 list.html 由 [和 
EN 
ha 汉 sqlDatalelper cs 
上 
图 4-11 添加 数据 库 连 接 信息 图 4-12 添加 SqlDataHelper 类 


SqlDataHelper 类 的 代码 如 下 : 


using System; 

using System.Collections.Generic; 
using System.Web; 

using System.Data; 

using System.Data.SqlClient; 
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/// <summary> 
/// SqlDataHelper 的 摘要 说 明 
/// </summary> 
public class SqlDataHelper 
{ 
public static string ConnString 
1 
get 
{ 


return System.Configuration.ConfigurationManager.ConnectionStrings 


["WebDBConnectionstring"] .ToString(); 
} 
} 
public SqlDataHelper() 
1 
// 


// TODO: 在 此 处 添加 构造 函数 逻辑 
pe 


public static SqlDataReader ExcuteSqlReturnReader (string sql, CommandType type, 


SqlParameter[] pars) 
| 

try 

{ 


SqlConnection conn = new SqlConnection (Connstring); 


if (conn.State == ConnectionState.Closed || conn.State == 


ConnectionState.Broken) 
{ 
conn.Open () ; 
SqlCommand cmd = new SqlCommand(sql, conn); 
If(pars != null && pars.Length > 0) 
{ 
Foreach (SqlParameter p in pars) 
. 
cmd.Parameters.Add (p); 
} 
} 
cmd.CommandType = type; 


SqlDataReader reader = cmd.ExecuteReader (CommandBehavior .CloseConnection); 


return reader; 
1 
Catch (Exception ex) 
{ 


return null; 


任务 4 实现 业务 逻辑 层 


业务 逻辑 层 (BLL》〉 是 用 户 表 示 层 和 数据 访问 层 之 间 的 连接 桥梁 ， 在 数据 交换 中 起 着 


承上启下 的 作用 ， 是 系统 架构 中 最 能 体现 核心 价值 的 部 分 。 它 的 关注 点 


要 集 


在 


此 务 规 


【学 凶 芝 洪福 六 汶 由 总 玲 信 戏 席 兴办 本 吕 朴 】 
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则 的 制定 、 业 务 流 程 的 实现 等 与 业务 需求 有 关 的 系统 设计 上 。 


一 般 ， 将 在 业务 逻辑 层 建立 实际 的 数据 库 连 接 ， 并 根据 用 户 的 请 求生 成 检索 语句 或 更 
新 数据 库 ， 并 把 结果 返回 给 前 端 界面 显示 。BLL 层 的 工作 主要 与 业务 规则 相关 ， 所 以 它 的 


内 容 根据 系统 所 应 对 的 领域 而 各 不 相同 。 
相关 知识 
4.4.1 认识 业务 逻辑 层 


业务 逻辑 层 包括 实际 业务 规则 以 及 数据 处 理 的 执行 部 分 。 业 务 逻 辑 层 通 过 将 
程 和 业务 规则 应 用 于 相关 数据 来 实现 用 户 从 表示 层 发 出 的 业务 请 求 。 一 般 应 根据 具 
编写 不 同 的 BLL 类 以 满足 需求 。 

BLL 层 的 主要 工作 包括 以 下 内 容 。 

党 ”根据 用 户 指令 和 数据 的 不 同 ， 将 当前 指令 划分 给 不 同 的 构造 器 处 理 。 

党 ”抽象 数据 库 对 象 。 

党 ”调用 DAL 层 操作 数据 库 方法 。 


不 同 的 BLL 类 。 


【 尝 给 这 灌 人 守候 尝 点 泌 圳 臣 沿 讽 共 加 Bh 加】 


图 4-13 BLL 层 的 实施 规则 


E 规 的 过 
体 应 用 ， 


如 图 4-13 所 示 ， 业 务 逻辑 层 用 于 分 离 USL 层 与 DAL 层 ， 并 可 根据 具体 业务 划分 定义 


在 本 任务 中 ， 业 务 逻 辑 层 的 主要 功能 是 在 数据 访问 层 与 登录 界面 (用 户 表示 层 ) 之 间 
实现 管理 员 数 据 表 信息 的 有 效 封 装 传递 。 这 里 编写 UserBLL 类 用 于 管理 相关 的 业务 规则 ， 
编写 getuserbyname 方法 用 于 连接 用 户 表示 层 和 数据 库 连 接 层 (DAL )， 使 其 一 方面 调用 数 


据 库 连接 层 SqlDataHelper 类 的 ExcuteSqlReturnReader 方 法 ,获取 数据 库 中 的 管理 员 
另 一 方面 封装 Users 对 象 ， 并 返回 给 登录 界面 〈 用 户 表 示 层 ) 使 用 。 


4.4.2 ”业务 逻辑 层 的 实现 
业务 逻辑 层 的 结构 示例 : 


信息 表 ; 


public class NewsBLL // 新 闻 业 务 类 型 
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Public int newsclassadd(string newsclass); // 新 闻 类 添加 方法 
public int newsclassUpdate (int id, string typename); // 新 闻 类 更 新 方法 
public int newsadd (News n); // 新 闻 添 加 方法 
public News getnewsbyid(string id); // 获 得 新 闻 ID 方 法 
} 
public class UserBLL // 管 理 员 业 务 类 型 


{ 
public Users getuserbyname (string username，string pwd);  // 获 得 用 户 姓名 密码 方法 
} 
public class OtherBLL // 其 他 业务 类 型 
public others (string paral, string para2); // 其 他 业务 类 型 实现 方法 
| 


任务 实施 


本 层 任 务 主要 是 编写 BLL 层 的 相关 类 ， 连 接 用 户 表示 层 和 数据 访问 层 。 
打开 webCompany 网 站 根 目 录 ， 如 图 4-14 所 示 ， 在 App_Code 文件 夹 下 中 新 建 BLL 
文件 夹 ， 然 后 在 BLL 文件 夹 中 新 建 一 个 UserBLL 类 。 


孔 | 加 | 间 品 汉 
DC.. WebConpany (vlast4)\ 
BB 3 webConpany 
由 DG Anin 
9 BB Mp_Code 
ca 
划 NewsBLL cs 
湖 VserBLL cs 
H Commcode 
由 上 DAL 
由 四 model 


图 4-14 添加 UserBLL 类 
实现 业务 逻辑 层 的 UserBLL 类 的 代码 如 下 : 


using System; 

using System.Collections.Generic; 
using System.Web; 

using System.Data.SqlClient; 
using System.Data; 

/// <summary> 

/// UserBLL 的 摘要 说 明 

/// </summary> 

Public class UserBLL 

{ 


【 尝 蕉 车 灌 守信 漳 点 茵 葵 臣 油 讽 光 澡 可 加 2】 


Public Users getuserbyname (string username, string pwd) 
{ 
SqlParameter[] pars = new SqlParameter[]{ 
new SqlParameter ("@username",username), 
new SqlParameter ("@pwd",pwd) 
hs 
Users u = new Users(); 
SqlDataReader reader = SqlDataHelper .ExcuteSqlReturnReader ("admin 
getusersbynameandpwd", CommandType.StoredProcedure, pars); 
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while(reader.Read()) 

{ 
u.Id = int.Parse (reader["id"] .ToString()); 
u.Username = reader["username"] .ToString(); 
u.Userpassword = reader["userpassword"] .ToString(); 

1 

reader.Close (); 

return u; 

下 
} 


任务 5 ”进行 对 象 封装 


封装 《Encapsulation〉 是 一 个 面向 对 象 的 概念 ， 含 义 是 对 外 部 世界 隐藏 类 的 内 部 。 面 
向 对 象 程序 设计 中 ， 一 般 以 类 作为 数据 封装 的 基本 单位 。 类 将 数据 和 操作 数据 的 方法 结合 
成 一 个 单位 。 设 计 类 时 ， 不 希望 直接 存 取 类 中 的 数据 ， 而 是 希望 通过 方法 来 存 取 数 据 。 如 
此 就 可 以 达到 封装 数据 的 目的 ， 以 方便 以 后 维护 、 升 级 系统 ， 也 可 以 在 操作 数据 时 多 一 层 
判断 ， 以 提高 数据 的 安全 性 。 

封装 还 可 以 解决 数据 存 取 权限 问题 ， 使 用 封装 可 以 将 数据 隐藏 起 来 ， 形 成 一 个 封闭 的 
空间 ， 用 户 可 以 设置 哪些 数据 只 能 在 这 个 空间 中 使 用 ， 哪 些 数据 可 以 在 空间 外 部 使 用 。 如 
果 一 个 类 中 包含 敏感 数据 ， 则 有 些 用 户 可 以 访问 ， 有 些 用 户 却 不 能 访问 。 如 果 不 对 这 些 数 
据 的 访问 加 以 限制 ， 那 么 后 果 是 很 严重 的 。 所 以 ， 在 编写 程序 时 ， 要 对 类 的 成 员 使 用 不 同 
的 访问 修饰 符 ， 从 而 定义 它们 的 访问 级 别 。 

封装 的 优点 主要 有 以 下 几 点 。 

党 ”好 的 封装 能 减少 耦合 。 

党 ”类 的 内 部 实现 可 以 自由 改变 。 

党 ”一 个 类 有 更 清楚 的 接口 。 

本 任务 中 涉及 的 对 象 封 装 是 实现 基础 数据 对 象 〈 管 理 员 用 户 ) 的 封装 ， 以 便于 用 户 表 
示 层 、 业 务 罗 辑 层 的 调用 。 


相关 知识 
4.5.1 ”对 象 封装 


对 象 封装 并 非 将 整个 对 象 完全 包 带 起 来 , 而 是 根据 具体 的 需要 , 定义 一 个 基本 单位 一 一 类 ， 
通过 类 中 定义 的 方法 来 存 取 数据 ， 通 过 类 的 修饰 符 来 设置 使 用 者 访问 的 权限 ， 从 而 起 到 保 
护 数据 的 作用 。 

1. 类 标识 符 的 命名 原则 


使 用 有 助 记 意义 的 名 词 或 名 词 短语 。 
使 用 Pascal 大 小 写 风 格 。 类 名 的 第 一 个 字母 和 后 续 每 个 单词 的 首 字母 大 写 。 
尽量 不 使 用 缩写 。 


+ 


+ 


< 


* 
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学 ”不 使 用 诸如 C 这 样 的 类 型 前 缀 来 指示 类 。 

学 ”不 使 用 下 划 线 。 

学 ”根据 约定 ， 接 口 名 总 是 以 字母 I 开头， 因此 ， 尽 量 不 要 用 I 作为 类 名 的 第 一 个 字 
符 ， 除 非 工 确实 是 整个 单词 的 第 一 个 字母 。 

2. 类 访问 修饰 符 


在 C# 中 ， 可 使 用 修饰 符 public、internal、protected、private 来 设 定 指 定 类 型 以 及 成 员 
的 可 访问 性 〈 也 称 作用 域 或 可 见 性 )。 

修饰 符 主要 用 来 修饰 类 的 字段 、 属 性 和 方法 , 以 及 类 对 象 本 身 。 各 修饰 符 的 含义 如 下 。 

学 ”public: 所 有 类 的 对 象 都 可 以 访问 。 

学 ”protected internal: 同一 个 程序 集 内 的 对 象 ， 该 类 对 象 及 其 子 类 可 以 访问 。 

学 internal: 只 有 同一 个 程序 集 内 的 对 象 可 以 访问 。 

党 protected: 只 有 该 类 对 象 及 其 子 类 对 象 可 以 访问 。 

学 ”private: 只 有 所 属 类 的 成 员 可 以 访问 。 

3. abstract、sealed 和 static 修饰 符 


学 abstract: 指示 该 类 只 能 用 来 作为 其 他 类 的 基 类 ， 不 能 直接 创建 该 类 的 实例 。 从 该 
类 派生 的 任何 类 都 必须 实现 它 的 所 有 抽象 方法 和 存 取 方 法 。 
学 ”sealed: 指定 该 类 不 能 被 继承 〈 用 作 基 类 )。 
学 static: 指定 该 类 只 包含 量 静 态 成 员 。 
本 任务 中 ， 将 管理 员 用 户 对 象 封装 成 一 个 User 类 ， 其 中 包括 用 户 ID、 用 户 名 称 、 用 
户 密码 、 添 加 时 间 等 属性 以 及 对 这 些 属性 的 读 取 、 设 置 操 作 方 法 。 其 中 ， 类 成 员 的 存储 类 
型 、 大 小 必须 与 连接 的 数据 库 中 保持 一 致 。 


4.5.2 ”对 象 封 装 的 实现 

C# 中 类 的 关键 字 是 class。 在 一 个 class 对 象 中 ， 主 要 分 为 field (字段 )、property ( 属 
性 ) 和 method (方法 )， 前 面 两 个 对 应 的 是 对 象 的 属性 ， 而 method 则 对 应 对 象 的 行为 。 

1. 类 的 定义 

定义 一 个 类 的 语法 格式 如 下 : 


[attributes] [modifiers] class identifier [:baselist] 
| 


Class body 
} 


其 中 各 选项 的 含义 如 下 : 

学。 [attributes]: 可 选 的 属性 部 分 ， 包括 一 对 中 括号 ， 其 中 是 一 个 或 多 个 属性 组 成 的 列 
表 ， 各 属性 之 间 以 逗号 分 隔 开 。 属 性 由 属性 名 和 其 后 的 位 置 或 命名 参数 列表 〈 可 
选 ) 组 成 。 属 性 也 可 以 包含 一 个 属性 目标 。 


【 兰 淮 芝 黄 福 ， 仿 泣 生 六 玲 人 下 戏 席 车 内 配器 夏 】 
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【学 隙 六 洪福 全 汶 由 总 玲 信 懂 项 闪闪 二 叶 直 】 
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学 [modifiers] 修 饰 符 : 主要 作用 是 指定 类 型 和 类 型 成 员 的 可 访问 性 〈 作 用 域 )， 指 定 
能 否 从 其 他 程序 集 、 同 一 程序 集 、 包 含 类 或 包含 类 的 派生 类 中 访问 该 类 。 

洛 ”Identifier 类 标识 符 : 遵循 变量 命名 规则 , 但 尽量 不 要 以 C、I 等 字母 前 缀 开头 ,不 
要 使 用 下 划 线 。 


2. 方法 的 声明 
声明 一 个 方法 的 语法 格式 如 下 : 


Returntype methodname (parameterlist) 
t 

// 方 法 主体 语句 块 
| 


其 中 各 选项 的 含义 如 下 : 

党 ”Retumtype〈 返 回 类 型 ): 是 一 个 类 型 名 ， 它 指定 了 方法 返回 的 结果 类 型 。 如 果 该 
方法 没有 返回 值 ， 那 么 用 关键 字 void 来 取代 返回 类 型 。 

党 ”Methodname (方法 名 ): 是 调用 方法 时 使 用 的 名 称 。 方 法 名 所 遵循 的 标识 符 命名 
规则 和 变量 名 一 样 。 

党 ”Parameterlist〈 参 数列 表 ): 可 选项 ， 描 述 了 可 以 传递 给 方法 的 信息 的 类 型 和 名 称 。 
在 圆 括号 中 填写 变量 信息 时 ， 要 像 声明 变量 时 那样 ， 先 写 参数 的 类 型 名 ， 再 写 参 
数 名 。 如 果 方 法 有 两 个 或 者 更 多 的 参数 ， 必 须 使 用 逗号 来 分 隔 它 们 。 

如 果 希 望 一 个 方法 返回 结果 ， 就 必须 在 方法 内 部 写 一 个 retum 语句 。 首 先 要 写 下 关键 

字 retum， 再 写 一 个 表达 式 〈 用 于 计算 要 返回 的 值 )。 表 达 式 的 类 型 必须 与 函数 指定 的 返 


类 型 相同 。 假 如 一 个 函数 返回 int 值 ， 那 么 return 语句 必须 返回 一 个 int 值 ， 否 则 程序 将 编 


译 出 错 。 
return 语句 应 该 位 于 方法 的 尾部 〈 因 为 会 结束 方法 )， 之 后 的 任何 语句 都 不 会 再 执行 


o 


如 方法 不 返回 结果 ， 即 返回 类 型 为 void， 可 以 利用 return 语句 从 方法 中 退出 。 在 这 种 情况 


下 ， 直 接 用 关键 字 returm 即 可 。 如 果 方 法 不 返回 任何 信息 ， 可 省 略 retum 语句 。 
3. 对 象 封装 示例 
例如 ， 通 过 下 面 的 代码 ， 即 可 成 功 封装 一 个 对 象 。 


Public class student 
Private string m name; 
private string m sex; 
Private int m age; 
Public string theClass() 
{ 

return "欢迎 使 用 "; 
} 
Public string thebook () 
{ 
m_book = "姓名 : "+m name+"\r\n 性别: "+m sex +"\r\n 年 龄 : "+m age; 


return m book; 


} 


} 

/// 姓名 

public string name 

{ 
get{return m name; 
set{m name = value 

} 

/// 性 别 

public string sex 

{ 
get{return m sex ; 
set{m sex = Value 

} 

/1/ 年 龄 

public int age 

{ 
get{return m age ; 
set{m age = value; 


任务 实施 


打开 网 站 根 目 录 webCompany， 在 App_Code 文件 夹 下 新 建 Model 文件 夹 ， 然 后 在 该 


2 


文件 夹 中 新 建 一 个 Users 类 ， 如 图 4-15 所 示 。 
rE 


总 | 锐 回 | 肛 | 风 第 


项 目 4 


DC.. MwebConpany (vlast4)\ 


BG webConpany 
由 Adnin 
3 GG hpp_Code 
由 - 回 BLL 
习 加 commcode 
由 BML 
3 GB odel 
9 News. cs 


| osers c= | 
图 4-15 新 建 Users 


封装 该 Users 类 对 象 的 代码 如 下 : 


using System; 
using System.Collections.Generic; 
using System.Web; 


/ 
区 
Wf 


// <summary> 
// Users 的 摘要 说 明 


// </summary> 


public class Users 


1 


int id; 
Public int Id 


三 层 架构 实现 登录 如 


【党 码 营 操守 : 仿 洋 点 溃 蕉 我 沿 讽 半 加 和】 
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【学 蒸 六 洪福 全 汶 由 总 玲 全 懂 殴 汐 站 二 叶 直 】 
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get { return id; } 
set { id = value; } 

} 

string username; 

public string Username 

{ 
get { return username; } 
set { username = value; } 

1 

string userpassword; 

Public string Userpassword 

{ 
get { return userpassword; } 
set { userpassword = value; } 


DateTime join time; 
public DateTime Join time 


get { return join time; } 
set { join time = value; } 


} 


项 目 总 结 


过 SQL Server 创建 数据 库 和 数据 表 ， 并 添加 第 
过 程 ， 然 后 用 C# 编 写 数 据 库 读 操 作 类 ， 完 成 数据 表示 


成 登录 页 面 制 作 ， 通 
写 读 取 管 理 员 信息 的 存储 
以 及 业务 逻辑 层 ， 并 将 管理 员 信 


息 封 装 成 类 ， 以 便于 后 期 调用 和 管理 。 最 终 ， 基 于 三 层 架 构 逻 辑 完成 管理 员 登 录 页 面 的 
设计 与 制作 。 


拓展 训练 


DD 一- 


. 描述 完成 登录 页 面 制作 的 主要 步 又 。 

. 为 WebShopDB 数据 库 新 建 一 个 皮具 商品 信息 表 Products。 
. 用 C# 编 写 读 取 Products 表 的 信息 代码 。 

. 基于 三 层 架 构 ， 设 计 读 取 皮 具 商 品 信息 表 的 程序 框架 。 

. 参考 管理 员 类 的 封装 过 程 ， 实 现 皮具 商品 类 的 封装 。 


5 


后 台 管 理 页 面 设计 


项 目 5I 入 


网 站 的 前 台 是 面向 浏览 者 的 ， 需 要 美观 、 大 方 ， 符 合 网 站 主题 。 网 站 的 后 台 主 要 是 为 了 方 
便 管 理 员 管理 后 台数 据 使 用 的 , 因此 并 不 需要 太 多 的 美工 设计 , 只 要 功能 齐全 、 方 便 操 作 即 可 。 

对 于 需要 经 常 更 新 的 网 站 来 说 ， 为 其 开发 一 个 后 台 管 理 系统 ， 可 以 极 大 地 方便 管理 员 
添加 、 管 理 和 删除 网 站 中 的 内 容 ， 如 文章 、 图 片 、 新 闻 和 评论 等 

一 般 来 说 ， 后 台 管 理 页 面 的 设计 主要 应 考虑 以 下 几 点 。 

党 ”后 台 管 理 页 面 是 提供 给 管理 者 使 用 的 ， 在 没有 得 到 授权 的 情况 下 ， 普 通 访问 者 无 


法 浏览 。 

党 ”后台 管理 页 面相 对 独立 ， 其 页 面 风格 可 以 与 前 台 页 面相 搭配 ， 也 可 以 具有 自己 独 
特 的 风格 。 

党 ”后 台 管 理 页 面 通常 是 由 框架 结构 组 成 的 ， 管 理 者 单 击 左 侧 的 导航 菜单 ， 可 以 在 右 
侧 显示 出 对 应 的 管理 页 面 


学 “后台 管理 页 面 通常 有 相关 的 头 部 选项 按钮 ， 以 实现 前 进 、 后 退 、 注 销 、 退 出 等 功 
能 ， 且 一 般 要 有 网 站 的 标题 以 及 logo。 
在 设计 后 台 管理 页 面 左 侧 的 导航 菜单 时 ， 要 综合 考虑 网 站 的 功能 。 本 项 目 中 的 导航 菜 
单 组 织 结 构 如 图 5-1 所 示 。 


后 台 管 理 系统 
I 
由 1 量 
系统 管理 | | 新 闻 管理 | | 产品 管理 | 人 才 管理 | 企业 管理 | | 留言 信息 
[ 
1 + T 了 T 1 
管 招 上 | 发 || 应 | [ 企 |[ 企 | | 贸 
理 聘 j| 布 上 聘 || 业 || 业 | | 言 
员 管 | 招 || 管 | | 信 || 信 | | 管 
管 理 || 柚 || 理 | | 息 || 息 | | 理 
理 类 | 内 
型 || 容 


图 5-1 导航 菜单 组 织 结构 图 


【 兰 汰 信 并 福全 洪 岂 六 淮 六 矶 项 当中 本 呈 丰 】 
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最 终 实现 的 页 面 效 果 如 图 5-2 所 示 。 


欢迎 使 用 后 台 管 理 系统 


项 目 分 解 
本 项 目 中 , 将 通过 完成 以 下 3 个 任务 , 来 学 习 网 站 中 后 台 管 理 页 面 的 设计 方法 和 技巧 。 
任务 1 后 台 管理 页 面 框架 的 实现 
任务 2 左 侧 导 航 菜单 的 加 载 
任务 3 使 用 XML 文件 实现 节点 导航 


任务 1 后 台 管理 页 面 框架 的 实现 


本 任务 主要 用 来 实现 后 台 管 理 页 面 的 布局 ， 并 在 后 台 主页 中 实现 其 他 页 面 的 嵌入 。 

页 面 的 整体 布局 仍然 使 用 DIV+CSS 技术 ; 页 面 头 部 使 用 了 超 链 接 和 JavaScript 技术 ， 
当 单 击 鼠标 时 ， 能 够 实现 页 面 的 前 进 与 后 退 ， 另 外 ， 使 用 <iframe> 实 现 了 中 间 部 分 页 面 的 
嵌入 。 


相关 知识 
5.1.1 后 台 管 理 页 面 的 布局 


本 例 中 的 后 台 管理 页 面 仍 然 使 用 DIV+CSS 技术 进行 布局 。 
首先 ， 用 DIV 将 整个 页 面 分 成 4 个 部 分 ， 如 图 5-3 所 示 。 


图 5-3 DIV 网 页 布局 


项 目 5 后 台 管 理 页 面 设计 如 
然后 编写 CSS 代码 ， 以 定义 网 页 中 各 部 分 的 颜色 、 高 宽 等 。 代 码 如 下 : 


#top { 
height:65px; 
width:1024px; 
border:1lpx solid #096; 
background-image:url (Images/AdminBg .gif); 
background-repeat:no-repeat; 


5.1.2 ”后 台 管理 页 面 文档 的 内 联 


局 
后 台 管理 页 面 的 中 部 采用 了 框架 结构 ， 将 ASPNET 的 代码 文档 内 联 到 后 台 管 理 页 面 
中 ，html 语言 中 使 用 <iframe></iframe> 进 行文 档 的 内 联 。 
iframe 元 素 会 创建 包含 男 外 一 个 文档 的 内 联 框架 (即行 内 框架 )。iframe 标签 是 成 对 出 
现 的 , 以 <iframe> 开 始 , 以 </iframe> 结 束 .iframe 标签 内 的 内 容 , 可 以 在 浏览 器 不 支持 iframe 
标签 时 显示 。 
iframe 的 常用 属性 如 表 5-1 所 示 。 


表 5-1 iframe 的 常用 属性 


属 性 描述 
i 规定 如 何 根据 周围 的 元 素来 对 齐 此 框架 
fameborder |1、0 | 规定 是 否 显 示 框 架 周围 的 边框 
height 规定 iframe 的 高 度 
width 定义 ifiame 的 宽度 
marginheight lpxes | 定义 iframe 的 顶部 和 底部 的 边 距 
marginwidth | pixels 。 | 定义 ifame 的 左 侧 和 右 侧 的 边 距 
name 规定 ifiame 的 名 称 
ee 规定 是 否 在 iframe 中 显示 滚动 条 
longdesc URL 规定 一 个 页 面 ， 该 页 面包 含 了 有 关 iframe 的 较 长 描述 
style css style 规定 元 素 的 行内 CSS 样式 
SIC URL 规定 在 iframe 中 显示 的 文档 的 URL 
利用 <iframe> 标 记 可 以 在 网 页 中 嵌入 其 他 的 网 页 或 者 图 片 。 例 如 ， 在 下 面 的 代码 中 概 
入 了 百度 的 首页 地 址 。 
<html> 
<title> iframe 切换 加 载 网 址 </title> 
<body> 
<iframe src="http://www.baidu.com" style="width: 50%; height: 50%" frameborder="0"> 
</iframe> 
</body> 
</html> 


显示 的 页 面 效 果 如 图 5-4 所 示 。 


【 尝 给 车 沽 守 . 访 济 点 茵 玲 匠 沿 讽 光 澡 可 加 2】 
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3 加 hanl2 扫 加 当 委 二 


886 
Bai 人 百度 


图 5-4 ”iframe 运行 效果 图 
任务 实施 


本 次 任务 的 目标 是 在 后 台 管 理 页 面 中 加 入 超 链接 按钮 ， 并 在 后 台 页 面 中 嵌入 
ASP.NET 页 面 。 

步骤 1: 在 后 台 管 理 页 面 头 部 放置 了 几 个 链接 按钮 ， 通 过 超 链接 的 方式 ， 链 接 到 桌面 
和 注销 登录 页 面 ， 并 通过 JavaScript 语言 实现 后 退 到 上 一 个 页 面 、 前 进 到 下 一 个 页 面 以 及 
退出 当前 页 面 等 功能 ， 在 后 台 主 页 页 面 中 添加 如 下 代码 。 

<div id="top right"> 

<a href="Dsgmain.aspx"” target="MainFrame"> 桌 面 </a> 

<a href="javascript:history.go(-1);"> 后 退 </a> 

<a href="javascript:history.go(1);"> 前 进 </a> 

<a href="../login/Login.aspx" target="MainFrame"> 注 销 </a> 


<a href="javascript:if (confirm(' 你 确定 要 退出 本 系统 吗 ?') ) window.close();"> 退 出 </a> 
</div> 


实现 以 后 的 效果 如 图 5-5 所 示 。 


图 5-5 后 台 管理 页 面 头 部 实现 效果 


【学 难 芒 洪福 全 汪 六 下 六 山区 党 相 时 夏 】 


步骤 2: 本 文 的 后 台 管理 页 面 在 页 面 的 中 部 采用 <iframe> 框 架 的 方式 将 ASP.NET 页 面 
嵌入 ， 当 选择 左 侧 导 航 中 相应 的 内 容 时 ， 在 页 面 的 中 部 将 显示 相应 的 操作 设置 页 面 。 
嵌入 的 ASP.NET 页 面 的 主要 作用 就 是 , 将 文本 中 定义 好 的 导航 内 容 通过 函数 调用 的 方 
式 加 载 到 管理 页 面 的 左 侧 。 在 后 台 主 页 页 面 中 添加 如 下 代码 : 
<div id="Middle"> 
<div id="leftTreeview"> 
<iframe src="MenuTree.aspx" style="width: 100%; height: 100%" frameborder="0"> 
</iframe> 
</div> 
<div id="Main"> 
<iframe name="MainFrame" id="mainfrm" src="Dsgmain.aspx" style="width: 98%; 
height:882px; " frameborder="0" language="javascript" > 
</iframe> 
</div> 
</div> 
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， 图 5-6 就 是 当 用 户 选择 左 侧 导 航 栏 中 “新 闻 管理 ”一 “添加 新 闻 ” 选 项 时 的 效 


项 目 5_ 后台 


5-7 为 


户 选择 “产品 管理 ”一 “添加 产品 ”选项 时 的 页 面 效 果 图 。 


增加 新 闻 
i 

i 
三 丘 直 全 上 多 口 昌 全 


二 
过 本 要 当 国 AN ax 和 家 


训 闻 PR 容 


图 5-6 添加 新 闻 界面 


河 后 台 管理 


添加 产品 


a ES 


图 5-7 添加 产品 界面 


管理 页 面 设计 刀 


【党 码 营 操 字 : 仿 洋 点 溃 玛 我 沿 席 装 澡 入】 
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【党 给 营 操 守信 洋 点 冲天 匠 内 讽 壮 加 和】 
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任务 2 左 侧 导航 菜单 的 加 载 


在 后 台 管 理 页 面 中 ， 左 侧 导航 菜单 呈 树 状 结构 ， 用 户 单 击 其 中 的 + 或 -按钮 ， 可 将 其 展 
开 或 折合 ， 单 击 有 具体 的 菜单 项 ， 可 在 右 侧 显 示 出 对 应 的 管理 界面 ， 在 其 中 用 户 即 可 进行 后 
台数 据 的 管理 和 操作 。 

要 实现 上 述 功 能 ， 需 要 将 导航 栏 中 的 内 容 写 入 XML 文件 ， 通 过 XmlDocument 类 获取 
XML 文档 的 物理 路 径 和 根 元 素 ， 然 后 通过 节点 遍历 获取 XML 文档 中 的 内 容 ， 最后， 通过 
TreeView 控件 实现 信息 的 分 级 视图 。 


相关 知识 
5.2.1 XmlDocument 类 


要 想 实现 左 侧 导 航 栏 的 树 状 导航 功能 ， 需 要 将 导航 栏 中 的 内 容 写 入 XML 文件 ， 然 后 
XmlDocument 类 会 将 其 视 为 树 状 结构 ， 通 过 获取 文档 的 路 径 和 根 节点 ， 得 到 文档 中 的 父 节 
点 和 子 节点 的 文本 、 图 片 路 径 、 网 页 路 径 等 信息 ， 并 将 其 加 载 到 TreeNode 类 中 ， 从 而 实现 
将 文档 中 的 内 容 加 载 到 后 台 页 面 的 左 侧 导航 栏 。 

导航 页 面 中 的 内 容 ， 包 括 文本 标题 、 图 片 路 径 、 链 接 网 页 地 址 等 ， 都 应 写 入 XML 文 
件 中 ， 并 且 在 文件 中 划分 相应 的 分 层 。 例 如 ,， “添加 新 闻 ” 和 “删改 新 闻 ” 就 应 该 属于 “新 
闻 管理 ”级 别 下 的 子 标题 。 此 外 ， 页 面 加 载 以 后 ， 哪 些 子 标题 是 展开 的 ， 哪 些 是 没有 展开 
的 ， 都 可 以 在 XML 文件 中 标识 出 来 。 

编写 完 XML 文档 之 后 ， 应 如 何 识 别 文档 中 的 内 容 并 将 其 正确 显示 出 来 呢 ? 这 里 将 用 
到 .NET 中 的 XmlDocument 类 。XmlDocument 将 XML 视 为 树 状 结构 ， 它 装载 XML 文档 ， 
在 内 存 中 构建 该 文档 的 树 状 结构 。 

XmlDocument 类 的 常用 属性 与 方法 如 表 5-2 和 表 5-3 所 示 。 


表 5-2 XmlDocument 类 的 常用 属性 


名 称 说 明 
Attributes 获取 一 个 XmlAttributeCollection， 它 包含 该 节点 的 属性 〈 从 XmlNode 继承 ) 
BaseURI 获取 当前 节点 的 基 URI 
ChildNodes 获取 节点 的 所 有 子 节点 《〈 从 XmlNode 继承 ) 
DocumentElement 获取 文档 的 根 XmlElement 
DocumentType 获取 包含 DOCTYPE 声明 的 节点 
FirstChild 获取 节点 的 第 一 个 子 级 (从 XmlNode 继承 ) 
HasChildNodes 获取 一 个 值 ， 该 值 指 示 节 点 是 否 有 任何 子 节点 《从 XmlNode 继承 ) 
InnerText 获取 或 设置 节点 及 其 所 有 子 节点 的 串联 值 ( 从 XmlNode 继承 ) 
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名 称 说 明 
InnerXml 获取 或 设置 表示 当前 节点 子 级 的 标记 
IsReadOnly 获取 一 个 值 ， 该 值 指示 当前 节点 是 否 是 只 读 的 
Item 获取 指定 的 子 元 素 (从 XmlNode 继承 ) 
LastChild 获取 节点 的 最 后 一 个 子 级 〈 从 XmlNode 继承 ) 
LocalName 获取 节点 的 本 地 名 称 
OwnerDocument 获取 当前 节点 所 属 的 XmlDocument 
ParentNode 已 重 写 ， 获 取 该 节点 〈 对 于 可 以 具有 父 级 的 节点 ) 的 父 级 
Value 获取 或 设置 节点 的 值 (从 XmlNode 继承 ) 

表 5-3 XmlDocument 类 的 常用 方法 

名 称 说 了 明 高 
AppendChild 将 指定 节点 添加 到 该 节点 子 节点 列表 的 末尾 〈 从 XmlNode 继承 ) 
Clone 创建 此 节点 的 一 个 副本 (从 XmlNode 继承 ) 专 
CloneNode 创建 此 节点 的 一 个 副本 
CreateAttribute 创建 具有 指定 名 称 的 XmlAttribute 程 
CreateElement 创建 XmlElement 体 
CreateNode 创建 XmlNode 2 
CreateTextNode 创建 具有 指定 文本 的 XmlText 划 
Equals 确定 两 个 Object 实例 是 否 相 等 (从 Object 继承 ) 
GetElementByld 获取 具有 指定 ID 的 XmlElement 
GetEnumerator 提供 对 XmlNode 节点 上 for each 样式 迭代 的 支持 〈 从 XmlNode 继承 ) 全 
GetType 获取 当前 实例 的 Type (从 Object 继承 ) 机 
ImportNode 将 节点 从 另 一 个 文档 导入 到 当前 文档 系 
Load 加 载 指定 的 XML 数据 4 
LoadXml 从 指定 的 字符 串 加 载 XML 文档 
PrependChild 将 指定 的 节点 添加 到 该 节点 子 节点 列表 的 开头 (从 XmlNode 继承 ) 

根据 XmlReader 中 的 信息 创建 一 个 XmlNode 对 象 。 读 取 器 必须 定位 在 节点 或 
ReadNode 
属性 上 

RemoveAll 移 除 当前 节点 的 所 有 子 节点 或 属性 (从 XmlNode 继承 ) 
RemoveChild 移 除 指定 的 子 节点 (从 XmlNode 继承 ) 


例如 ， 下 面 的 代码 通过 XmlDocument 类 加 载 了 一 个 XML 文件。 


static void Main (string[] args) 


1 
XmlDocument doc = new XmlDocument (); 
doc.Load("Test.xml"); // 加 载 XML 数据 
XmlElement xe = doc.DocumentElement; // 获 取 根 节点 
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Console .WriteLine (xe.Name) // 输 出 XML 文件 根 节点 下 的 元 素 属性 
上 


5.2.2 TreeView 控件 


TreeView 控件 用 来 显示 信息 的 分 级 视图 , 其 效果 类 似 于 Windows 系统 中 的 资源 管理 器 
目录 。TreeView 控件 中 的 各 项 信息 都 有 一 个 与 之 相关 的 Node 对 象 。TreeView 显示 Node 
对 象 的 分 层 目录 结构 ， 每 个 Node 对 象 均 由 一 个 标签 对 象 和 其 相关 的 位 图 组 成 。 

建立 TreeView 控件 后 ， 可 以 展开 和 折 又 、 显 示 或 隐藏 其 中 的 节点 。TreeView 控件 一 
般 用 来 显示 文件 和 目录 结构 、 文 档 中 的 类 层次 、 索 引 中 的 层次 和 其 他 具有 分 层 目 录 结 构 
的 信息 。 

TreeNode 表示 TreeView 控件 中 的 节点 。 其 中 ， 包 含 其 他 节点 的 节点 称 为 “ 父 节 点 ”， 
包含 在 其 他 节点 中 的 节点 称 为 “ 子 节点 ”， 没 有 任何 子 节点 的 节点 称 为 “ 叶 节 点 ”不 被 任 
何其 他 节点 包含 且 是 所 有 其 他 节点 的 上 级 节点 的 节点 称 为 “ 根 节点 ”。 通 过 对 父 节 点 到 叶 节 
点 的 递归 遍历 ， 可 读 取出 各 个 节点 的 信息 。 

TreeNode 类 包含 了 一 些 用 于 存储 节点 状态 的 属性 。 例 如 ， 可 使 用 Selected 属性 来 确定 
节点 是 否 被 选 定 ; 使 用 Expanded 属性 来 确定 节点 是 否 已 展开 ; 使 用 DataBound 属性 来 确定 
节点 是 否 已 被 绑 定 到 数据 ; 当 节 点 已 被 绑 定 到 数据 上 时 ， 使 用 DataItem 属性 可 访问 其 基础 
数据 项 。 

TreeNode 类 还 提供 了 一 些 属性 ， 通 过 它们 可 以 确定 一 个 节点 相对 于 树 中 其 他 节点 的 位 
置 。 例 如 ， 使 用 Depth 属性 可 以 确定 节点 的 深度 ; 使 用 ValuePath 属性 可 以 获得 从 当前 节点 
到 其 根 节点 的 分 隔 节 点 列表 ; 使 用 Parent 属性 可 以 确定 节点 的 父 节点 ; 访问 子 节点 ， 应 使 
用 ChildNodes 集合 。 

TreeNode 的 常用 属性 和 方法 如 表 5-4 和 表 5-5 所 示 。 


表 5-4 TreeNode 的 常用 属性 


属 性 说 ”了 明 
Depth 获取 节点 的 深度 

Expanded 获取 或 设置 一 个 值 ， 该 值 指示 是 否 展开 节点 
JImageUrl 获取 或 设置 节点 旁 显示 的 图 像 的 URL 


NavigateUrl 获取 或 设置 单 击 节点 时 导航 到 的 URL 
SelectAction 获取 或 设置 选择 节点 时 引发 的 事件 


Parent 获取 当前 节点 的 父 节点 
Text 获取 或 设置 为 TreeView 控件 中 的 节点 显示 的 文本 
获取 或 设置 用 于 存储 有 关节 点 的 任何 其 他 数据 〈 如 用 于 处 理 回 发 事件 的 数据 ) 的 非 
alue 
显示 值 
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表 5-5 TreeNode 的 常用 方法 


方 ” 法 说 明 

Collapse 折 芋 当前 树 节点 

Equals 确定 两 个 Object 实例 是 否 相 等 (从 Object 继承 ) 
Expand 展开 当前 树 节点 

GetType 当前 实例 的 Type (从 Object 继承 ) 

Select ms TreeView 控件 中 的 当前 节点 


任务 实施 


本 任务 的 目标 是 首先 获取 XML 文档 的 物理 路 径 和 根 元 素 ， 然 后 通过 节点 遍历 获取 
XML 文档 中 的 内 容 。 
步骤 1: 首先 获取 XML 文档 的 物理 路 径 ， 并 且 加 载 指定 的 XML 数据 ， 然 后 创建 一 个 
XmlDocument 类 型 的 对 象 ， 通 过 其 获得 XML 文档 的 根 元 素 。 
通过 在 文档 中 添加 如 下 代码 ， 来 获取 XML 文档 的 物理 路 径 和 文档 根 元 素 。 
Private void TreeInit () 
{ 
this .TreeView2.Nodes.Clear (); /* 清 除 所 有 节点 */ 
string TreeUrl = Server.MapPath ("Menu.xml"); /* 获 取 menu.xml 的 物理 路 径 */ 
xmlDocument xmlDoc = new XmlDocument (); 
xmlDoc.Load (TreeUr1); 
LoadRootNode (xmlDoc.DocumentElement); /*DocumentElement 获 取 文 档 的 根 */ 
} 
步骤 2: 通过 遍历 根 节点 以 下 的 父 节点 ， 获 取 节 点 的 文本 、 图 片 路 径 、 网 页 路 径 以 及 
是 否 展开 等 信息 。 如 果 父 节 点 还 有 子 节点 ， 则 通过 LoadFunNode0 函 数 递归 遍历 子 节点 的 
信息 ， 并 将 其 加 载 到 后 台 页 面 中 。 


private void LoadRootNode (XmlNode xmlNode) 
| 


TreeNode node; 
foreach (XmlElement xe in xmlNode.ChildNodes) 
{ 
node = new TreeNode(); 
node .Text = xe.GetAttribute("Text"); 
node.ImageUr] = xe.GetAttribute ("ImageUr]1"); 
string Url = xe.GetAttribute ("NavigateUr1"); 
string Expand = xe.GetAttribute ("Expand"); 
if (string.IsNullOrEmpty (url)) 
| 
node.SelectAction = TreeNodeSelectAction .Expand; 
if (Expand == "true") 
{ 
node.ExpandAll (); 
} 
: 
else 
{ 
node.NavigateUr] = url; 
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node.SelectAction = TreeNodeSelectAction.SelectExpand; 
} 
this.TreeView2.Nodes.Add (node); 
if (xe.ChildNodes.Count > 0) // 递 归 加 载 
{ 
LoadFunNode (node, xe); 
: 
| 
} 


TreeView 控件 加 载 节点 以 后 的 示例 如 图 5-8 所 示 。 


asp:TreeViews TreeVien 


由 商 
早早 消 早 早 湖 


光 
[CC 


图 5-8 ”TreeView 控件 加 载 节点 效果 
任务 3 使 用 XML 文件 实现 节点 导航 


任务 2 中 , 通过 XmlDocument 类 将 XML 文档 视 为 树 状 结构 , 从 中 读 取 出 文档 中 的 内 容 ， 
并 通过 TreeView 控件 加 载 到 页 面 中 。 本 任务 将 主要 介绍 XML 文档 的 结构 和 语法 ， 以 及 后 台 
管理 页 面 是 如 何 创建 XML 文档 ， 并 将 后 台 页 面 中 导航 栏 中 的 信息 添加 到 文档 中 的 。 


相关 知识 
5.3.1 XML 文件 结构 


XML 即 可 扩展 标记 语言 ， 是 一 种 用 于 标记 电子 文件 使 其 具有 结构 性 的 标记 语言 。 它 可 
以 用 来 标记 数据 ， 定 义 数 据 类 型 ， 是 一 种 允许 用 户 对 自己 的 标记 语言 进行 定义 的 源 语 言 ， 
能 够 方便 地 描述 一 些 事物 。 它 非常 适合 网 络 传输 以 及 软件 传输 数据 ， 提 供 统一 的 方法 来 传 
输 和 交换 独立 于 应 用 程序 或 供应 商 的 结构 化 数据 。 XML 文件 的 书写 具有 规范 的 文件 格式 和 
基本 语法 。 

一 个 XML 文件 通常 包含 文件 头 和 文件 体 两 大 部 分 。 

1. 文件 头 


XML 文件 头 由 XML 声明 与 DTD 文件 类 型 声明 组 成 。 其 中 ，DTD 文件 类 型 声明 是 可 
以 省 略 的 ， 而 XML 声明 是 必须 要 有 的 ， 以 使 文件 符合 XML 的 标准 规格 。 
例如 ， 下 面 是 一 个 XML 文件 的 第 一 行 代码 。 


<?xml version="1.0"” encoding="gb2312"?> 


这 行 代 码 为 XML 文件 声明 。 其 中 ,“<?” 表 示 一 条 指令 的 开始 ,“?> ”表示 一 条 指令 


【学 孙 芒 洪福， 全 汶 由 总 玲 全 懂 项 党 站 本 叶 起 】 
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的 结束 ; xml 代表 此 文件 是 XML 文件 ; version="1.0" 表 示 此 文件 用 的 是 XML1.0 标准 ; 
encoding="gb2312" 表 示 此 文件 所 用 的 字符 集 是 中 文 ， 默 认 值 为 Unicode。 
注意 : XML 声明 必须 出 现在 文档 的 第 一 行 。 


2. 文件 体 


文件 体 中 包含 的 是 XML 文件 的 内 容 ，XML 元 素 是 XML 文件 内 容 的 基本 单元 。 从 语 
法 讲 ， 一 个 元 素 包含 一 个 起 始 标记 、 一 个 结束 标记 以 及 标记 之 间 的 数据 内 容 。XML 元 素 与 
HTML 元 素 的 格式 基本 相同 ， 其 格式 如 下 : 

< 标记 名 称 属性 名 1=" 属 性 值 1” 属性 名 1=" 属 性 值 1"…> 内 容 </ 标 记名 称 > 

所 有 的 数据 内 容 都 必须 在 某 个 标记 的 开始 和 结束 标记 内 ， 而 每 个 标记 又 必须 包含 在 另 
一 个 标记 的 开始 与 结束 标记 内 ， 形 成 内 套 式 的 分 布 ， 只 有 最 外 层 的 标记 不 必 被 其 他 的 标记 
所 包含 。 最 外 层 的 是 根 元 素 (Root)， 又 称 为 文件 (Document) 元 素 ， 所 有 的 元 素 都 包含 在 
根 元 素 内 。 

例如 ， 下 面 给 出 的 XML 文件 中 ， 根 元 素 就 是 <Flowers>。 根 元 素 必须 且 只 能 有 一 个 ， 
在 该 文件 中 有 3 个 <Flower> 子 元 素 ， 这 样 的 元 素 在 根 元 素 内 部 可 以 有 多 个 。 

lowers 

本 过 

<Name>iris</Name> 
</Flower> 
<Flower> 
<Name>iris</Name> 
</Flower> 
<Flower> 
<Name>iris</Name> 


</Flower> 
</Flowers> 


5.3.2 XML 基本 语 


1. 注释 


XML 的 注释 与 HTML 的 注释 相同 ， 以 “<!--” 开 始 ， 以 “-->” 结 束 。 例 如 : 
<!-- 这 是 一 个 XML 文件 --> 


2. 区 分 大 小 写 

在 HTML 中 是 不 区 分 大 小 写 的 ， 而 在 XML 中 需要 区 分 大 小 写 ， 包 括 标记 、 属 性 、 指 
令 等 。 

3. 标记 

XML 标记 与 HTML 标记 相同 ,“<” 表 示 一 个 标记 的 开始 ,“>” 表示 一 个 标记 的 结束 。 
XML 中 只 要 有 起 始 标记 , 就 必须 有 结束 标记 , 而 且 在 使 用 嵌 套 结构 时 , 标记 之 间 不 能 交叉 。 
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在 XML 中 不 含 任何 内 容 的 标记 叫做 空 标记 ， 格 式 如 下 : 
< 标记 名 称 /> 


4. 属性 
XML 属性 的 使 用 与 HTML 属性 基本 相同 ， 但 需要 注意 的 是 ， 属 性 值 要 加 双 引 号 。 例 如 : 


<tr align="center"> 


5. 实体 引用 
实体 引用 是 指 分 析 文档 时 会 被 字符 数据 取代 的 元 素 , 实体 引用 用 于 XML 文档 中 的 特 


殊 字 符 ， 否 则 这 些 字符 会 被 解释 为 元 素 的 组 成 部 分 。 例 如 ， 如 果 要 显示 “<”， 需 要 使 用 
实体 引用 “&lt; ”否则 会 被 解释 为 一 个 标记 的 起 始 。XML 中 有 5 个 预定 义 的 实体 引用 ， 
如 表 5-6 所 示 。 


表 5-6 ”XML 中 的 实体 引用 


实体 引用 
&lt; 
Rot; 


quot; 


例如 : 


<?xml version="1.0"> <! 一 文件 美 一 > 

<program> 

<script>if(a &gt; b) then max=a</script> <!--"&gt;" 表 示 实 体 引 用 --> 
</program> 


上 面 的 代码 表示 : 这 a>b) then max=a。 
6. CDATA 
在 XML 中 有 一 个 特殊 的 标记 CDATA， 在 CDATA 中 所 有 文本 都 不 会 被 XML 处 理 器 


解释 ， 直 接 显示 在 浏览 器 中 ， 使 用 方法 如 下 : 


<! [CDATA[ 这 里 的 内 容 可 以 直接 显示 。]]> 

7. 处 理 指令 

处 理 指令 是 用 来 给 处 理 XML 文件 的 应 用 程序 提供 信息 的 ， 处 理 指令 的 格式 如 下 : 
<? 处 理 指令 名 称 处 理 指令 信息 ?> 

例如 ，XML 声明 就 是 一 条 处 理 指令 : 


<?xml version="1.0" encoding="gb2312"?> 


其 中 ，xml 是 处 理 指令 名 称 ，“version="1.0" encoding="gb2312"” 是 处 理 指令 信息 。 


项 目 5 后 


5.3.3 XML 与 CSS 


面 设计 双 


利用 CSS 可 以 设 定 XML 文件 的 显示 方式 , 即 在 XML 文件 的 头 部 , XML 声明 的 下 面 ， 


加 入 如 下 一 条 语句 : 


<?xml :stylesheet type="text/css"” href="css 文 件 的 URL"?> 


下 面 通过 一 个 例子 来 介绍 如 何 利用 CSS 显示 XML 文件 。 
首先 建立 一 个 显示 XML 文件 的 CSS 样式 flowers.css， 代 码 如 下 : 


flower{font-size:24px; display:block} 
vendor{font-size:36px;color:red} 
price{display:block} 


然后 ， 在 flowers.xml 文件 中 使 用 该 flowers.css 样式 ， 即 在 flowers.xml 文件 中 的 XML 


声明 下 面 加 入 以 下 语句 : 


<?xml:stylesheet type="text/css" href="flowers.css"?> 


完整 的 程序 代码 如 下 : 
<?xm] version="] .0" encoding="gb2312"?> 
<?xml:stylesheet type="text/css" href="Flowers.css"?> 
<Flowers> 
<Flower> 
<Vendor>shopl</Vendor> 
<Name>iris</Name> 
<Price>$4.00</Price> 
</Flower> 
<Flower> 
<Vendor>shop2</Vendor> 
<Name>iris</Name> 
<Price>$4.30</Price> 
</Flower> 
<Flower> 
<Vendor>shop3</Vendor> 
<Name>iris</Name> 
<Price>$3.50</Price> 
</Flower> 
</Flowers> 


此 例 在 浏览 器 中 的 显示 效果 如 图 5-9 所 示 。 


shopl iris 
S4.00 


shop2 iris 
54.30 


shop3 iris 
53.50 


图 5-9 利用 CSS 显示 XML 文件 


【 兰 涩 六 其 福全 立 生 着 下 站 厂 区 兴 只 朴 品 夏 】 


用 CSS 来 显示 XML 文件 时 ， 不 具备 任何 选择 性 。 也 就 是 说 ， 根 元 素 之 下 的 所 有 数据 
都 会 被 全 部 显示 ， 不 能 改变 原文 件 的 结构 和 内 容 的 顺序 。 另 外 ，CSS 并 不 支持 中 


Ph 文 标记 ， 
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因为 CSS 不 是 专门 为 XML 开发 的 样式 语言 。 
任务 实施 


本 任务 的 目的 是 创建 XML 文档 ， 并 将 后 台 页 面 导航 栏 中 的 信息 添加 到 文档 中 。 
在 XML 文档 中 加 入 左 侧 导航 栏 中 的 导航 信息 ， 包 括 文 本 、 链 接地 址 等 ， 代 码 如 下 


<?xm] version="]1.0" encoding="utf-8" ?> 

<Root> 

<Node Text=" 系 统管 理 " ImageUrl="" NavigateUrl="" Expand="true"> 

<Node Text=" 管 理 员 管理 "” NavigateUrl="~/ Admin/User/UserManager.aspx"/> 
<Node Text=" 网 站 公告 " NavigateUrl="~/ Admin/Web/Webshow.aspx"/> 

<Node Text=" 网 站 配置 " NavigateUrl="~/ Admin/Web/WebSet.aspx"/> 
</Node> 

<Node Text=" 新 闻 管理 "ImageUrl="" NavigateUrl="" Expand="false"> 

<Node Text=" 添 加 新 闻 " NavigateUrl="~/Admin/News/NewsAdd.aspx " /> 
<Node Text=" 删 改 新 闻 " NavigateUrl="~/Admin/News/EditAndDelNews.aspx"/> 
</Node> 


</Root> 


代码 的 第 一 行为 XML 文档 的 声明 ，<Root> 为 文件 的 根 ，<Node> 为 文档 的 父 节 点 和 子 
节点 , 父 节点 和 子 节 点 里 面 的 内 容 是 标记 的 属性 和 属性 值 , 用 于 信息 的 传输 ,通过 ASPNET 
页 面 中 的 XmlDocument 类 和 TreeView 控件 获得 XML 文件 的 根 ， 从 而 逐 层 遍 历 XML 文档 


中 的 节点 信息 ， 并 在 后 台 管 理 页 面 中 显示 出 来 。 
最 终 的 后 台 管 理 页 面 导 航 栏 效果 如 图 5-10 所 示 。 


系统 管理 


欢迎 使 用 后 台 管 理 系统 


图 5-10 后台 管理 页 面 导航 栏 


项 目 总 结 


网 站 的 前 台 设 计 要 能 吸引 访问 者 的 注意 力 ， 将 网 站 的 整体 内 容 呈 现 给 访问 者 。 一 个 完 
善 的 网 站 除了 要 有 优化 的 前 台 设计 ， 还 要 有 方便 管理 员 对 网 站 进行 管理 的 后 台 界 面 。 后 台 


管理 界面 主要 是 为 了 方便 管理 员 对 网 站 的 事务 进行 管理 , 如 对 网 站 发 布 的 信息 、 用 户 信 
网 站 公告 和 留言 信息 等 进行 管理 。 


本 项 目 中 ， 后 台 管 理 页 面 采 用 DIV+CSS 布局 结构 ， 页 面 中 间 的 导航 部 分 使 用 <iframe> 
将 ASP.NET 文件 内 联 到 网 页 中 。 导 航 栏 里 面 的 内 容 写 在 XML 文件 中 , 当 页 面 加 载 ASPNET 


文件 时 ， 用 XmlDocument 类 和 TreeView 控件 遍历 XML 文档 中 的 内 容 ， 进 而 在 页 面 9 


FP 将 


项 目 5_ 后 台 管理 页 面 设计 已 
导航 信息 显示 出 来 。 
拓展 训练 


1. 描述 实现 后 台 管理 页 面 的 主要 步骤。 
2. 在 原 有 XML 文件 中 加 入 产品 管理 的 导航 信息 。 
3. 用 .NET 代码 读 取 新 写 的 XML 文档 中 的 信息 。 


【党 码 营 加 守 : 仿 洋 点 溃 玛 我 沿 讽 装 澡 各】 


129 


6a 


新 闻 管 理 模块 设计 


项 目 51 入 

新 闻 管理 模块 是 网 站 后 台 管 理 的 一 部 分 。 本 项 目 主要 通过 添加 新 闻 和 删除 新 闻 两 个 功 
能 的 实现 ， 来 学 习 和 掌握 网 站 中 页 面 设 计 的 方法 和 技巧 

新 闻 管 理 模块 的 后 台 管 理 页 面 如 图 6-1 和 图 6-2 所 示 


图 6-1 新 闻 管理 模块 的 后 台 界面 


序号 
管理 | 1 新 闻 一 新 闻 一 的 内 容 2014-10-02 11:20:30 [小 | [到 聊 
人 3 新 闻 二 新 闻 二 的 内 容 2014-10-03 11:20:30 [站 玖 ] [删除 ] 
= 新 闻 管 理 3 新 闻 三 新 闻 三 的 内 容 2014-10-04 11-20:30 [修改 ] | 删除 ] 
车间 列表 苞 加 新 闻 


图 6-2 ”新 闻 列表 界面 


项 目 分 解 
本 项 目 将 通过 完成 2 个 任务 ， 来 掌握 网 站 中 新 闻 管 理 模块 的 设计 与 制作 过 程 。 
任务 1 新 闻 管 理 界面 的 设计 
任务 2 增 、 删 、 查 、 改 功能 的 实现 


项 目 6_ 新 闻 管 理 模块 设计 如 


任务 1 新 闻 管 理 界面 的 设计 


新 闻 管 理 模块 主要 用 于 完成 新 闻 信息 的 增 、 删 、 查 、 改 等 操作 ， 因 此 ， 对 于 新 闻 管 理 
界面 来 说 ， 就 是 要 设计 一 个 能 体现 上 述 功能 的 界面 。 


相关 知识 
6.1.1 了 解 在 线 HTML 编辑 器 


在 线 HTML 编辑 器 又 称 为 基于 浏览 器 的 “所 见 即 所 得 ”HTML 编辑 器 ， 被 广泛 应 用 于 
各 类 网 站 的 文章 发 布 、 论 坛 发 帖 等 功能 。 例 如 ， 在 OSChina 〈 开 源 中 国 社 区 ) 网 站 上 发 帖 、 
写 博客 、 提 交 新 闻 、 添 加 开源 软件 等 时 ， 都 要 用 到 在 线 HTML 编辑 器 。 
目前 ， 有 非常 多 优秀 的 在 线 HTML 编辑 器 ， 而 且 这 些 编辑 器 大 多 数 都 是 开源 的 ， 用 户 
可 以 随便 使 用 。 下 面 将 介绍 一 些 优 秀 的 国产 HTML 编辑 器 。 
KindEditor 可 以 说 是 目前 最 为 优秀 、 成 熟 的 编辑 器 ， 加 载 速度 非常 快 ， 文 档 全 面 ， 支 
持 扩展 开发 ， 为 众多 网 站 所 使 用 。 

xhEditor 是 一 个 基于 jQuery 的 简单 迷你 型 XHTML 编辑 器 ， 它 高 效 ， 可 视 化 ， 可 基于 
网 络 访问 ， 并 且 能 兼容 IE 6.0 一 8.0、Firefox 3.0、Opera 9.6、Chrome 1.0 和 Safari 3.22 等 浏 
览 器 。xhEditor 中 的 文档 也 非常 全 面 ， 支 持 插件 开发 。 

新 浪 Editor 应 该 算是 最 贴近 网 友 体验 的 一 款 编辑 器 ， 简 洁 、 大 方 ， 并 且 使 用 方便 、 功 
能 强大 。 

eWebEditor 也 是 一 款 基于 浏览 器 的 、 所 见 即 所 得 的 在 线 HTML 编辑 器 。 它 能 够 在 网 页 
上 实现 许多 桌面 编辑 软件 (如 Word) 所 具有 的 强大 可 视 编辑 功能 。Web 开发 人 员 可 以 用 它 
把 传统 的 多 行文 本 输入 框 textarea 替换 为 可 视 化 的 文本 输入 框 ， 使 最 终 用 户 可 以 可 视 化 地 
发 布 HTML 格式 的 网 页 内 容 。eWebEditor 已 基本 成 为 网 站 内 容 管 理发 布 的 必 备 工具 。 

TQEditor 是 国内 第 一 个 兼容 IE 9 的 在 线 编辑 器 ,也 是 一 个 功能 /体积 比 最 优 的 在 线 编 
辑 器 。 

uuHEdt 是 一 款 基于 Web 的 所 见 即 所 得 的 HTML 网 页 编辑 器 ， 可 以 非常 简单 地 在 网 站 
中 嵌入 可 视 化 的 网 页 编辑 功能 。 同样 支持 各 类 常见 的 浏览 器 , 如 IE、Opera、Firefox、Google 
Chrome 和 Safari。 

JAte 编辑 器 是 一 款 精 致 、 小 巧 的 文本 编辑 器 ,目的 是 为 了 提升 用 户 体验 , 主要 基于 as3 
平台 开发 。 由 于 需要 Flash Player 9 以 上 支持 ，JAte 在 通用 性 上 要 稍 差 一 些 。 未 来 可 能 发 布 
为 组 件 形式 ， 以 满足 aa、flex、air 等 的 调用 。 


6.1.2 GridView 控件 的 使 用 
ASPNET 提供 了 许多 工具 ， 以 在 网 格 中 显示 表格 数据 ， 例 如 GridView 控件 。 通 过 使 


【党 奏 膏 若 守 .让 洋 点 茵 坊 臣 认 席 妆 加 BN 攻 】 
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用 GridView 可 以 显示 、 编辑 和 删除 多 种 不 同 的 数据 源 ( 如 数据 库 、XML 文件 和 公开 数据 


的 业务 对 象 ) 中 的 数据 。 
1. GridView 数据 绑 定 基础 


GridView 控件 主要 用 来 绑 定数 据 源 ， 进 行 数据 的 显示 。 一 般 情况 下 ， 可 以 绑 定 到 


SqlDataSource 控件 的 DataTable 对 象 、DataView 对 象 等 ， 也 可 以 绑 定 到 列表 对 象 。 
GridView 提供 了 两 种 数据 绑 定 的 方式 : DataSourceID 与 DataSource。 
使 用 DataSourceID 属性 进行 数据 绑 定时 ， 可 将 GridView 控件 绑 定 到 数据 源 控件 。 


GridView 控件 支持 双向 数据 绑 定 ， 也 就 是 说 ， 除 可 以 使 用 该 控件 显示 返回 的 数据 之 外 ， 还 


可 以 使 它 自动 支持 对 绑 定 数据 的 更 新 和 删除 操作 。 


使 用 DataSource 属性 进行 数据 绑 定时 ， 可 绑 定 到 包括 ADO.NET 数据 集 和 数据 读 取 


器 在 内 的 各 种 对 象 。 此 方法 需要 为 所 有 附加 功能 〈 如 排序 、 分 页 和 更 新 ) 编写 代码 。 
2. 获取 GridView 被 选中 行 的 信息 


GridView 有 两 个 属性 : AutoGenerateSelectButton 和 DataKeyNames。 
学 ”AutoGenerateSelectButton 设置 为 true 时 ，GridView 会 出 现 一 个 选择 键 。 


学 ”DataKeyNames 表示 获取 或 设置 一 个 数组 ， 该 数组 包含 了 显示 在 GridView 控件 中 芯 


项 的 主键 字段 的 名 称 。 


当 用 户 单 击 选择 时 , 就 可 以 取出 主键 字段 的 值 。 取 GridView 选中 的 值 是 通过 GridView 


的 SelectedValue 属性 来 实现 的 。 代 码 如 下 : 


<asp:GridView ID="GridView2" runat="server" AllowPaging="True" 
AutoGenerateColumns="False" 
onselectedindexchanged="GridView2 SelectedIndexChanged" 
AutoGenerateSelectButton=true DataKeyNames="Id"> 
<!-- 设置 DataKeyName 为 Id 字 段 --> 
<Columns> 
<asp:BoundField DataField="Id" HeaderText=" 编 号 " /> 
<asp:BoundField DataField="Description" HeaderText=" 描 述 " /> 
</Columns> 
</asp:GridView> 


除了 可 以 用 SelectVaule 获得 被 选中 行 的 信息 以 外 ， 还 可 以 使 用 以 下 属性 获得 被 选中 行 


的 信息 。 
学 ”SelectedDataKey: 返回 被 选中 行 相关 的 DataKey 对 象 ， 有 多 个 数据 键 时 很 有 用 。 
党 SelectedIndex: 返回 选中 行 的 索引 (从 零 计算 )。 
党 ”SelectedValue: 返回 选中 行 的 数据 键 值 。 
党 ”SelectedRow: 返回 被 选中 的 行 ， 返 回 GridViewRow 对 象 。 


3. 为 DataKeyNames 绑 定 多 个 键 值 


为 DataKeyNames 绑 定 多 个 键 值 的 方法 很 简单 ， 只 需 将 字符 串 内 的 各 键 值 以 “,” 分 隔 


开 就 可 以 了 。 例 如 : 


<asp:GridView id="grdEmployees" DataSourceID="srcEmployees" 


项 目 6_ 新 闻 管 理 模块 设计 如 


DataKeyNames="LastName,FirstName" AutoGenerateSelectButton="true" 
Runat="server" /> 


在 绑 定 了 多 个 键 值 的 情况 下 ， 取 值 不 再 使 用 SelectedValue 属性 ， 而 要 使 用 


SelectedDataKey 


属性 ， 如 : 


<asp:SqlDataSource id="srcEmployeeDetails" 
Connectionstring="<%$ ConnectionStrings:Employees %>" 
SelectCommand="SELECT * FROM Employees WHERE FirstName=@FirstName AND LastName= 
@LastName" Runat="server"> 

<SelectParameters> 

<asp:ControlParameter Name="FirstName" ControlID="grdEmployees" 
PropertyName='SelectedDataKey ("FirstName")' /> 
<asp:ControlParameter Name="LastName" ControlID="grdEmployees" 
PropertyName='SelectedDataKey ("LastName")' /> 
</SelectParameters> 

</asp:SqlDataSource> 


4. GridView 


的 DataKey 属性 


DataKey 表示 的 是 获取 一 个 DataKey 对 象 集合 ， 这些 对 象 表示 GridView 控件 中 的 每 一 


行 的 数据 键 值 。 


怎么 使 用 DataKey 呢 ? 例如， 要 取 GridView1l 第 6 行 的 DataKey 键 值 ， 可 以 这 样 编写 


代码 : 


Object key = GridViewl.DataKey[5] .Value; 
如 果 组 键 有 多 个 键 值 ， 可 以 这 样 编写 代码 : 
Object key = GridViewl.DataKey[5] .Values ("LastName"); 


如 果 在 SelectedIndexChanged 事件 中 ， 可 以 这 样 编写 代码 : 


int index = 


CustomersGridView.SelectedIndex; 


Message .Text = CustomersGridView.DataKeys [index] .Value.ToString(); 


任务 实施 


步骤 1: 增加 新 闻 、 修 改 新 闻 界面 的 实现 。 


如 下 : 


新 闻 的 增加 与 修改 ， 在 网 站 中 要 引入 第 三 方 在 线 编辑 控件 。 引 入 的 代码 


<iframe src=".../Edit/editor.htm?id=content&amp;ReadCookie=0" frameborder="0" 
marginheight="0" marginwidth="0" scrolling="No" height="450" style="width: 727px"> 


</iframe> 


引入 在 线 编辑 控件 后 ， 页 面 的 显示 效果 如 图 6-3 所 示 。 
步骤 2: 删除 新 闻 界面 的 实现 。 


为 了 实现 新 
进行 数据 绑 定 。 
码 如 下 : 


闻 信 息 的 删除 与 修改 ， 在 网 站 中 需 用 GridView 控件 对 所 有 的 新 闻 信息 


同时 ， 为 了 方便 编辑 与 删除 新 闻 信息 ， 需 要 增加 两 个 图 片 按钮 控件 。 代 


【 兰 涩 芝 黄 福全 泣 生 六 下 低 懂 席 区 吕 本 器 夏 】 
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新 闻 标题 : 
新 闻 类 别 : 上- 洁 洲 六 坟 - [3] 


IES 壮 E23 


MOe araA 之 一 己 


新 闻 内 容 : 


ast 


首页 图 片 : CE 
图 片 说 明 : 
图 片 链接 : 
发 布 人 : 
录入 时 间 : |20147116 


下 


图 6-3 ”在线 编辑 控件 


<asp:GridView ID="GridViewl" Width="800px" AutoGenerateColumns="False" 
runat="server" onrowdeleting="GridView]l RowDeleting" DataKeyNames="ID" 
onrowediting="GridViewl RowEditing"> 
<Columns> 
<asp:BoundField DataField="ID" HeaderText=" 编 号 " ReadOonly="True" SortExpression= 
bl 
<asp:TemplateField HeaderText=" 新 闻 标 题 "> 
<ItemTemplate> 
<asp:Label ID="Labell" runat="server" Text='<%# Eval ("title") %>'> 
</asp:Label> 
</ItemTemplate> 
</asp:TemplateField> 
<asp:TemplateField HeaderText=" 新 闻 类 型 "> 
<ItemTemplate> 
<asp:Label ID="Label2" runat="server" Text='<%# Eval ("typename") $>'> 
</asp:Label> 
</ItemTemplate> 
</asp:TemplateField> 
<asp:TemplateField HeaderText=" 发 布 时 间 "> 
<ItemTemplate> 
<asp:Label ID="Label3" runat="server" Text='<%# Eval("joindate") $>'> 
</asp:Label> 
</ItemTemplate> 
</asp:TemplateField> 
<asp:TemplateField HeaderText=" 操 作 "> 
<ItemTemplate> 
<asp:ImageButton ID="ImageButtonl" runat="server" 
ImageUrl="~/Admin/Images/Edit.gif" 
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CommandName="Edit" CausesValidation="false" /> 

<asp:ImageButton ID="ImageButton2" runat="server" 
OnClientClick="return confirm('" 确 定 删除 ? ');" 
ImageUr1="~/Rdmin/Images/Delete .gif" 
CommandName="Delete" CausesValidation="false" /> 

</ItemTemplate> 

</asp:TemplateField> 
</Columns> 
</asp:GridView> 


注意 ，GridView 控件 绑 定 的 数据 是 在 后 台 代 码 里 设 定 的 , 页 面 显示 效果 如 图 6-4 所 示 。 


编号 新 闻 标 题 新 闻 类 型 发 布 时 间 操作 
数据 绑 定 数据 绑 定 数据 绑 定 数据 绑 定 El 
数据 绑 定 数据 绑 定 数据 绑 定 数据 绑 定 时 编辑 删除 
数据 绑 定 数据 绑 定 雪 据 绑 定 数据 绑 定 局 编 辑 买 删除 
数据 绑 定 歼 据 绑 定 数据 弹 定 数据 绑 定 时 编辑 % 删除 
数据 绑 定 数据 绑 定 数据 绑 定 数据 绑 定 好 篇 加 %% 删除 


《12345678910,.. 2»> 
图 6-4 新闻 编 辑 、 删 除 界面 


任务 2 增 、 删 、 查 、 改 功能 的 实现 


对 信 ) ag 删 、 查 、 改 ， 是 系统 开发 中 常见 的 功能 ， 所 做 的 工作 就 是 对 数据 表 进 行 
增 、 删 、 查 、 改 等 操作 。 具体 来 说 ， 增 加 信息 就 是 对 数据 表 进 行 insert 操作 ; 删除 信息 就 
是 对 数据 表 进 行 delete 操作 ; 修改 信息 就 是 对 数据 表 进行 update 操作 ; 查找 信息 就 是 对 数 
据 表 进行 select 操作 。 


相关 知识 
6.2.1 ”相关 数据 访问 层 的 实现 


为 了 实现 新 闻 模 块 增加 、 删 除 和 修改 信息 的 管理 功能 ， 首 先 要 实现 数据 访问 层 的 相关 
功能 。 比 如 ， 要 实现 删除 新 闻 的 功能 ， 需 要 先 实现 数据 访问 层 的 功能 ， 再 由 业务 逻辑 层 调 
用 数据 访问 层 的 删除 功能 。 

在 数据 访问 层 的 类 SqlDataHelpercs 中 ， 可 用 如 下 代码 中 实现 删除 表 中 数据 的 功能 


Public int deletetable(string tablename, string condition) 
1 


【 兰 淮 芝 黄 福全 冰 生 六 玲 人 下 懂 席 区 吕 本 器 夏 】 


SqlParameter [] pars = new SqlParameter[]{ 
new SqlParameter ("@tablename",tablename), 
new SqlParameter ("@condition",condition) 
1 
return ExcuteSQLReturnInt ("sp deletetable", CommandType.StoredProcedure, pars); 
} 


6.2.2 ”相关 业务 逻辑 层 的 实现 


同样 ， 为 了 实现 新 闻 模 块 中 增加 信息 的 管理 功能 ， 也 需要 先 实现 业务 逻辑 层 的 功能 。 
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【学 东 芒 洪福 仿 汶 由 总 丽人 玉民 项 闪闪 夏 叶 直 】 
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在 新 闻 管 理 的 业务 逻辑 层 的 类 NewsBLL.cs 中 ， 用 如 下 代码 实现 增加 新 闻 数 据 的 功能 : 


public int newsadd (News n) 
SqlParameter[] pars = new SqlParameter[]1{ 
new SqlParameter ("@typeid",n.typeid), 
new SqlParameter ("@title",n.title), 
new SqlParameter ("@newscontent",n.newscontent), 
new SqlParameter ("@picture",n.picture), 
new SqlParameter ("@laiz",n.laiz), 
new SqlParameter ("@joindate",n.joindate), 
new SqlParameter ("@changedate",n.changedate), 
new SqlParameter ("@imgurl",n.imgurl), 
new SqlParameter ("@imgtext",n.imgtext), 
new SqlParameter ("@imglink",n.imglink), 
new SqlParameter ("@imgAlt",n.imgAlt) 
}; 
return SqlDataHelper.ExcuteSQLReturnInt ("news_ ADD",CommandType.StoredProcedure, 
pars); 


} 
用 如 下 代码 实现 修改 新 闻 数据 的 功能 : 


Public int newsUpdate (News n) 
{ 
SqlParameter [] pars = new SqlParameter[]1{ 
new SqlParameter ("@id",n.id), 
new SqlParameter ("@typeid",n.typeid), 
new SqlParameter ("@title",n.title), 
new SqlParameter ("@newscontent",n.newscontent), 
new SqlParameter ("@picture",n.picture), 
new SqlParameter ("@laiz",n.laiz), 
new SqlParameter ("@changedate",n.changedate), 
new SqlParameter ("@imgurl","ad"), 
new SqlParameter ("@imgtext","asda"), 
new SqlParameter ("@imglink","ad"), 
new SqlParameter ("@imgAlt","asda") 
}; 
return SqlDataHelper.ExcuteSQLReturnInt ("news Update", CommandType.StoredProcedure, 
pars); 
' 


用 以 下 代码 实现 添加 新 闻 类 型 的 功能 : 
public int newsclassadd(string newsclass) 
| 
SqlParameter [] Pars = new SqlParameter[]{ 
new SqlParameter ("@typename",newsclass) }; 
return SqlDataHelper.ExcuteSQLReturnInt ("newsclass ADD", 
CommandType.StoredProcedure,pars); 
} 


用 以 下 代码 实现 修改 新 闻 类 型 的 功能 : 
Public int newsclassUpdate (int id, string typename) 
{ 
SqlParameter[] pars = new SqlParameter[]{ 
new SqlParameter ("@id",id), 
new SqlParameter ("@typename",typename) 


项 目 6_ 新 闻 管 理 模块 设计 如 


] 

return SqlDataHelper.ExcuteSQLReturnInt ("newsClass Update", 
CommandType.StoredProcedure, pars); 
} 


任务 实施 


步骤 1: 新 建新 闻 相 关 信息 表 ， 以 及 增加 、 修 改 、 删 除 新 闻 的 存储 过 程 。 
(1) 新 建 WebShopDB 数据 库 及 news 表 、newsclass 表 、View_news 表 。 新 建 数 据 库 
及 数据 表 的 操作 过 程 参见 项 目 3。 其 中 ， 新 建 news 表 的 SQL 语句 如 下 : 


USE [WebShopDB] 

/****** Object: Table [dbo]l . [news] Script Date: 2014/5/16 10:33:49 **x****/ 
SET ANSI NULLS ON 

GO 

SET QUOTED IDENTIFIER ON 

GO 

CREATE TABLE [dbo] . [news] ( 

[id] [int] IDENTITY(1,1) NOT NULL, 

[typeid] [int] NULL, 

[title] [nvarchar] (50) NULL, 

[newscontent] [text] NULL, 

[picture] [nvarchar] (50) NULL, 

[laiz] [nvarchar] (50) NULL, 

[joindate] [datetime] NULL, 

[changedate] [datetime] NULL, 

[imgurl] [nvarchar] (50) NULL, 

[imgtext] [nvarchar] (50) NULL, 

[imglink] [nvarchar] (50) NULL, 

[imgAlt] [nvarchar] (50) NULL, 
CONSTRAINT [PK news] PRIMARY KEY CLUSTERED 
( 

[id] RASC 
) WITH (PAD INDEX = OFF, STATISTICS NORECOMPUTE = OFF, IGNORE DUP _ KEY = OFF, 
ALLOW_ ROW LOCKS = ON, ALLOW PAGE LOCKS = 
ON) ON [PRIMARY] 

) ON [PRIMARY] TEXTIMAGE ON [PRIMARY] 


【党 码 营 操 字 :人 访 洋 点 冲 给 我 沿 讽 半 澡 入】 


GO 

/****** Object: Table [dbo]. [newsclass] Script Date: 2014/5/16 10:33:49 **x****/ 
SET ANSI NULLS ON 

GO 

SET QUOTED IDENTIFIER ON 

GO 


CREATE TABLE [dbo].[newsclass]( 
[id] [int] IDENTITY(1,1) NOT NULL, 
[typename] [nvarchar] (50) NULL, 
CONSTRAINT [PK newsclass] PRIMARY KEY CLUSTERED 
( 
[id] AsC 
)WITH (PAD INDEX = OFF, STATISTICS NORECOMPUTE = OFF, 
IGNORE DUP KEY = OFF, ALLOW ROW LOCKS = ON, ALLOW PAGE LOCKS = 
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ON) ON [PRIMARY] 
) ON [PRIMARY] 


GO 


/****** Object: View [dbo]. [View news] Script Date: 2014/5/16 10:33:49 *****w*/ 
SET ANSI NULLS ON 


GO 

SET QUOTED IDENTIFIER ON 

GO 

CREATE VIEW [dbo].[View news] 
AS 


SELECT dbo.news.id, dbo.news.typeid, dbo.news.title, dbo.news.newscontent, 
dbo.news.picture, dbo.news.laiz, dbo.news.joindate, dbo.news.changedate, 
dbo.news.imgurl, dbo.news.imgtext, dbo.news.imglink, dbo.news.imgAlt, 
dbo.newsclass.typename 

FROM dbo.news INNER JOIN dbo.newsclass 

ON dbo.news.typeid = dbo.newsclass.id 


GO 
EXEC sys.sp_addextendedproperty @name=N'MS DiagramPanel', @value=N' [0E232FF0- 
B466-11cf-A24F-00AAOOA3EFFF, 1.00] 
Begin DesignProperties = 
Begin PaneConfigurations = 
Begin PaneConfiguration = 0 
NumPanes = 4 
Configuration = "(H (1[40] 4[20] 2[20] 3) )" 
End 
Begin PaneConfiguration = 1 
NumPanes = 3 
Configuration = "(H (1 [50] 4 [25] 3))" 
End 
Begin PaneConfiguration = 2 
NumPanes = 3 
Configuration = "(H (1 [50] 2 [25] 3))" 
End 
Begin PaneConfiguration = 3 
NumPanes = 3 
Configuration = "(H (4 [30] 2 [40] 3))" 
End 
Begin PaneConfiguration = 4 
NumPanes = 2 
Configuration = "(H (1 [56] 3))" 
End 
Begin PaneConfiguration = 5 
NumPanes = 2 
Configuration = "(H (2 [66] 3))" 
End 
Begin PaneConfiguration = 6 
NumPanes = 2 
Configuration = "(H (4 [50] 3))" 
End 
Begin PaneConfiguration = 7 
NumPanes = 1 


【 银 闪 旬 嫩 斋 台 噶 生 晤 罩 宕 诬 和 奈 钳 呈 业 大 】 
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End 
DisplayFlags 


TopColumn = 0 


End 
End 
End 
Begin SQLPane = 
End 
Begin DataPane = 


= 280 


Begin ParameterDefaults 


End 


Begin ColumnWidths 


Width = 284 

Width = 1500 
Width = 1500 
Width = 1500 
Width = 1500 
Width = 1500 
Width = 1500 
Width = 1500 
Width = 1500 

End 
End 


Begin CriteriaPane = 
Begin ColumnWidths 


Column = 1440 
Alias = 900 
Table = 1170 
Output = 720 
Append = 1400 
NewValue = 1170 
SortType = 1350 


= 9 


= 11 


Sortorder = 1410 


GroupBy = 1350 
Filter = 1350 


Or ‘= 1350 
Or = 1350 
Or = 1350 
End 
End 
End 


Q@level0type=N'SCHEMA' ,elevel0name=N'dbo'y 
@levelltype=N'VIEW',@levellname=N'View _ news '" 


GO 


EXEC sys.sP_addextendedproperty @name=N'MS DiagramPaneCount', @value=1 
@level0Otype=N'SCHEMA',@levelO0name=N'dbo', 
@levelltype=N'VIEW',@levellname=N'View news' 


GO 


(2) 增加 新 闻 的 存储 过 程 news_ADD 的 代码 如 下 : 


news_ADD 
USE [WebShopDB] 
GO 


忆 动态 网 站 建设 案例 教程 (ASP.NET) 


项 目 6_ 新 闻 管 理 模块 设计 如 


/****** Object: StoredProcedure [dbo]. [news ADD] Script Date: 2014/5/16 10:30:08 


克 太 太太 妇女 了/ 

SET ANSI NULLS ON 

GO 

SET QUOTED IDENTIFIER ON 
GO 

一 -用 途 : 增加 一 条 记录 
-- 项 目 名 称 : 

-- 说 明 : 


-- 时 间 : /8/7 19:40:02 
CREATE PROCEDURE [dbo].[news ADD] 
@typeid int, 

@title nvarchar (50), 
@newscontent text, 
@picture nvarchar(50), 
@laiz nvarchar (50), 
@joindate datetime, 
@changedate datetime, 
@imgurl nvarchar (50), 
Qimgtext nvarchar(50), 
@imglink nvarchar (50), 
@imgAlt nvarchar (50) 


AS 

INSERT INTO [news]( 

[typeid], [title], [newscontent], [picture], [laiz], [joindate], [changedate], 
[imgurl], [imgtext], [imglink], [imgAlt] 

)VALUES ( 
Qtypeid, @title,@newscontent,@picture, @laiz,@joindate, @changedate, @imgur], @imgtext, 

Q@imglink,@imgAlt 
| 


(3) 修改 新 闻 的 存储 过 程 news_Update 的 代码 如 下 


SET ANSI NULLS ON 
SET QUOTED IDENTIFIER ON 
GO 


【 尝 玲 六 灌 守信 漳 些 英 玛 站 岂 席 半 四 2 加 3%】 


-- 用 途 : 修改 一 条 记录 
-项 目 名 称 : 

-说 明 : 

-时 间 : /8/10 20:41:43 
CREATE PROCEDURE [dbo].[news Update] 
@id int, 

@typeid int, 

@title nvarchar (50), 
@newscontent text, 
@picture nvarchar(50), 
@laiz nvarchar (50), 
@changedate datetime, 
Qimgur1l nvarchar (50), 
Qimgtext nvarchar(50), 
Qimglink nvarchar(50), 
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Q@imgAlt nvarchar (50) 
RS 
UPDATE [news] SET 
[typeid] = @typeid, [title] = @title, [newscontent] = @newscontent, [Picture] = 
@picture, [laiz] 
= @laiz, [changedate] 
= Qimgtext, [imglink] 
WHERE id=@id 


(4) 删除 新 闻 的 存储 过 程 sp_deletetable 的 代码 如 下 : 


USE [WebShopDB] 

GO 

/****** Object: StoredProcedure [dbo].[sp deletetable] Script Date: 2014/5/16 
ha 

SET ANSI_ NULLS ON 


@changedate, [imgur1] = @imgurl, [imgtext] 
@imglink, [imgAlt] = @imgAlt 


上 


GO 
SET QUOTED IDENTIFIER ON 
GO 
-- Author : Zhousa 


-- Create date: 2014 年 月 日 :14:23 
-- Description: 删除 功能 
CREATE PROCEDURE [dbo].[sp_deletetable] 
@tablename nvarchar (100), 
@condition nvarchar (500) 
AS 
BEGIN 

DECLARE @Sql nvarchar (800) 

SET @Sql='delete from '+@tablename+' '+@condition 
-- PRINT @Sql 

EXEC (@Sq1) 
END 


步骤 2: 查找 新 闻 信息 功能 的 实现 。 

对 新 闻 信 息 的 查找 就 是 对 所 有 新 闻 信 息 的 数据 绑 定 。 正 如 在 任务 1 中 所 述 ， 显 示 所 有 
新 闻 信 息 是 通过 GridView 控件 来 实现 的 。 同时, 为 了 方便 绑 定 所 需要 的 数据 ，GridView 控 
件 的 数据 是 在 后 台 代 码 里 设 定 的 ， 主 要 的 实现 代码 如 下 : 


public static int pageindex = 0; 

Public static int pagesize = 10; 

public static string condition = ""; 

SqlDataHelper commtool = new SqlDataHelper(); 
protected void Page Load(object sender, EventArgs e) 
1 


【 尝 奏 这 灌 村 .六 洋 点 茵 零乱 沿 席 妆 澡 六 2】 


if (!IsPostBack) 
' 
getnewslistbind(); 
} 
| 
public void getnewslistbind() 
下 
this .RspPNetPagerl.RecordCount = commtool.getdatacountbycondition ("View News", ""); 
this.AspNetPagerl]l .PageSize = 10; 
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this .GridViewl.DataSource = Commtool .getpageindex (pageindex, pagesize, "View News", "*", 
,id")s; 
this.GridViewl .DataBind(); 
} 


步骤 3: 增加 新 闻 信息 功能 的 实现 。 
增加 新 闻 信 息 就 是 从 页 面 中 获得 相应 的 新 闻 信 息 ， 通 过 业务 逻辑 层 的 方法 执行 存储 过 
程 ， 然 后 把 相应 的 信息 插入 到 新 闻 列 表 中 。 主 要 的 实现 代码 如 下 


News n = new News(); 
NewsBLL newsbl]l = new NewsBLL(); 
protected void btnsubmit Click(object sender, EventArgs e) 
Lt 
if (this.ddlTypeList.SelectedValue == "选择 类 型 ") 
{ 
ClientScript.RegisterStartupScript (this.GetType (), "test", "alert(' 请 选择 新 闻 
类 型 ') "，true) ; 


return; 
if (this.content .Value == "") 


ClientScript .RegisterStartupScript (this.GetType(), "test", "alert(' 请 输入 新 闻 
内 容 ')"，true); 


return; 


} 
n.typeid = int.Parse(this.ddlTypeList.SelectedValue.ToString ()); 
n.title = txtName.Text; 
n.picture = ProPicture; 
n.newscontent = HttpUtility.HtmlDecode (this.content .Value); 
n.laiz = this.txtLaiz.Text; 
n.imgAlt = this.txtText.Text; 
n.imgtext = this.txtText.Text; 
n.imglink = this.txtImgLink.Text; 
n.imgurl = @"\Admin\FileImg\NewsImg\" + ProPicture; 
n.joindate = Convert.ToDateTime (lbTime.Text); 
n.changedate = Convert.ToDateTime (lbTime .Text) 7 
newsbll .newsadd (n); 
Server.Transfer ("EditAndDelNews .aspx"); 
} 


pe ee side 
删除 新 闻 信息 的 功能 很 简单 ， 只 要 得 到 相应 新 闻 信 息 的 主键 ， 按 条 件 删除 新 闻 列 表 相 
Eee em 
SqlDataHelper commtool = new SqlDataHelper(); 
Protected void GridViewl RowDeleting (object sender, GridViewDeleteEventArgs e) 
String id = this.GridViewl .DataKeys [e.RowIndex] .Value.ToString(); 


Cormmtool.dqeletetable("news"，"”Wwhere id=" + id); 
getnewslistbind(); 


Public void getnewslistbind() 
| 
this .AsPNetPagerl.RecordCount = commtool .getdatacountbycondition ("View News", 


【党 给 营 操 字 : 仿 洋 点 溃 共 我 沿 讽 半 澡 人 入】 
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this.AsPNetPagerl.PageSize = 10; 
this.GridViewl .DataSource = commtool .getpageindex (pageindex, pagesize, "View News", "*", 
mid")s; 
this.GridView]l .DataBind(); 
1 


修改 新 闻 信息 的 功能 是 这 样 实现 的 : 先 从 新 闻 信 息 绑 定 列表 中 得 到 相应 新 闻 信 息 的 主 
键 ， 然 后 跳 转 到 NewsUpdate.aspx 页 面 ， 代 码 如 下 : 


protected void GridViewl RowEditing(object sender, GridViewEditEventArgs e) 
{ 


string id = this.GridViewl .DataKeys[e.NewEditIndex] .Value.ToString(); 
Server.Transfer ("NewsUpdate.aspx?id=" + id); 


} 
在 NewsUpdate.aspx 页 面 中 可 以 对 内 容 进 行 修改 工作 ， 代 码 如 下 : 


NewsBLL newsbll] = new NewsBLL(); 
News news = new News(); 
Protected void btnsubmit Click(object sender, EventArgs e) 
如 
if (this.ddlTypeList.SelectedValue == "选择 类 型 ") 
{ 
ClientScript.RegisterStartupScript (this.GetType(), "test", "alert(' 请 选择 新 闻 
类 型 ')"，true)， 
return; 
' 
if (this.content .Value == "") 
{ 
ClientScript.RegisterStartupScript(this.GetType()，"test"，"alert(' 请 输入 新 闻 
内 容 ')"，true); 
return; 
} 
news.id = Int32.Parse (id); 
news.typeid = int.Parse(this.ddlTypeList.SelectedValue.ToString()); 
news.title = txtName.Text; 
news.picture = ProPicture; 
news.newscontent = this.content .Value 
news.laiz = this.txtLaiz.Text; 
news.imgAlt = this.txtText.Text; 
news.imgtext = this.txtText.Text; 
news.imglink = this.txtImgLink.Text; 
news.imgurl = @"\Admin\FileImg\NewsImg\" + ProPicture; 
news.changedate = Convert.ToDateTime (lbTime.Text); 
if (newsbll.newsUpdate (news) != 0) 
{ 
ClientScript.RegisterStartupScript(this.GetType()，"test"，"alert(' 修 改 成 功 ! 
Crue)s 
Server.Transfer ("EditAndDelNews .aspx"); 
return; 
} 
else 
{ 
ClientScript.RegisterStartupScript(this.GetType()，"test"，"alert(' 修 改 失败 ! 
')", true); 
return; 


项 目 6_ 新 闻 管 理 模块 设计 如 


项 目 总 结 


本 项 目 主 要 围绕 新 闻 管理 模块 ， 利 用 三 层 架 构 及 GridView 控件 来 实现 新 闻 信 息 的 增 
加 、 查 找 、 修 改 和 删除 操作 。 本 实 训 项 目 在 数据 访问 层 、 业 务 逻 辑 展 和 显示 层 进 行 了 深入 
的 讲解 和 实现 代码 分 析 ， 旨 在 增强 读者 理解 与 熟练 运用 三 层 架 构 及 ASPNET 控件 的 能 力 。 


拓展 训练 


1. 描述 如 何 利用 三 层 架 构 实现 新 闻 管 理 功能 。 
2. 利用 三 层 架 构 实 现 对 产品 信息 的 管理 。 


【学 孙 芝 洪福 六 汶 由 总 下 全民 项 小 相 时 二】 
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站 内 搜索 模块 设计 


项 目 5 引 入 


站 内 搜索 功能 对 于 需要 快速 获取 网 站 信息 的 用 户 来 说 ， 具 有 非常 重要 的 作用 。 调 查 显 
示 ， 大 部 分 消费 者 在 第 一 次 访问 某 个 网 站 时 ， 往 往 首 先进 行 站 内 搜索 ， 如 果 搜 索 结果 中 没 
有 他 们 想 要 的 ， 则 部 分 消费 者 会 马上 离开 ， 去 别 的 网 站 寻找 。 这 对 该 网 站 来 说 ， 就 等 于 是 
失去 了 一 个 与 用 户 建立 关系 和 增加 销售 的 机 会 。 

实现 站 内 搜索 的 关键 在 于 设计 搜索 入 口 、 执 行 搜索 和 展示 搜 py 
索 结果 。 通 常 而 言 ， 用 户 可 以 对 产品 信息 、 服 务 信息 和 公司 新 闻 
信息 等 进行 站 内 搜索 操作 。 

本 项 目 中 ， 将 以 新 闻 信 息 的 搜索 为 例 ， 介 绍 站 内 搜索 功能 的 
设计 与 实现 。 其 中 ， 站 内 搜索 前 台 页 面 如 图 7-1 所 示 。 

用 户 在 列表 框 中 选择 “新 闻 信 息 ” 选 项 ， 在 其 下 的 搜索 文本 框 中 输入 欲 搜 索 的 信息 ， 
单 击 “ 搜 索 ” 按 钮 ， 则 会 显示 如 图 7-2 所 示 的 搜索 结果 页 面 。 


日 站 内 搜索 


图 7-1 站 内 搜索 前 台 页 面 


版 权 所 有 : 哈 迪 斯 皮 县 有 限 公司 


技术 支持 : 信息 部 联系 电话 : 020-36963697 


图 7-2 搜索 结果 页 面 效 果 


项 目 7 站 内 搜索 模块 设计 如 


任务 ”站 内 搜索 功能 的 实现 


实现 站 内 搜索 的 关键 在 于 设计 搜索 入 口 、 执 行 搜索 和 展示 搜索 结果 。 

本 任务 将 以 新 闻 信息 搜索 为 例 ， 介 绍 实现 站 内 搜索 功能 的 方法 。 要 完成 本 任务 ， 需 要 
用 到 数据 库 中 的 news 数据 表 ， 主 要 是 数据 表 信息 的 检索 、 分 页 以 及 DataList 控件 的 应 用 。 

下 面 就 来 一 一 进行 介绍 。 


相关 知识 
7.1.1 设计 搜索 入 口 


搜索 入 口 应 使 用 显眼 的 设计 ， 通 常 位 于 第 一 屏 的 居中 或 居 右 的 位 置 ， 如 图 7-3 所 示 。 
a EE 
图 7-3 ”搜索 入 口 设计 举例 

搜索 入 口 通 常 具 有 如 下 特点 。 

学 ”搜索 框 中 一 般 有 提示 文字 ， 如 “请 输入 关键 字 ”、“ 关 键 字 ”、“ 分 类 ”和 url 等 ， 
以 在 视觉 上 标识 该 输入 框 的 功能 或 提示 可 行 的 操作 。 

光 ”具有 焦点 功能 ， 即 页 面 初始 化 和 输入 框 失去 焦点 时 , 会 显示 提示 文字 ; 鼠标 聚焦 搜索 
框 时 ， 会 消除 提示 文字 。 

学 ”输入 词 智能 〈 模 糊 ) 匹配 提示 (search suggest) 近年 来 也 逐渐 成 为 搜索 入 口 的 设计 标 
配 。 智能 提示 的 搜索 词 可 以 在 一 定 意义 上 引导 用 户 进行 集中 而 热门 的 搜索 , 获得 更 有 
效 的 结果 ， 以 及 拓展 关联 搜索 。 

学 ”许多 网 站 会 在 全 局 搜索 入 口中 放置 分 类 搜索 下 拉 菜单 .对 于 通用 搜索 和 拥有 复杂 信息 
类 型 的 网 站 而 言 ， 该 下 拉 菜 单 可 以 帮助 用 户 精确 搜索 目标 ， 减 少 单 击 次 数 。 


【 尝 维 这 灌 宣读 漳 点 茵 到 匠 沿 讽 半 让 可 加 2】 


设计 站 内 搜索 时 ， 可 供应 用 的 ASP.NET 主要 控件 及 用 途 如 表 7-1 所 示 。 
表 7-1 站 内 搜索 可 用 的 ASP.NET 控件 及 用 途 


控件 类 型 控件 名 称 
标准 /TextBox 控件 | txtSearch 输入 检索 关键 字 
标准 /Button 控件 | BtnSearch “搜索 ”按钮 
标准 /DropDownList ddl Search 创建 分 类 搜索 下 拉 列 表 ， 其 中 每 个 选项 由 ListItem 元 素 定义 


为 DropDownList 控件 添加 列表 项 ， 显 示 站 内 检索 类 别 下 拉 菜单 ， 其 实现 方法 有 两 种 。 
(1) 通过 属性 窗口 为 DropDownList 控件 添加 列表 项 
在 控件 上 右 击 , 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 , 打开 属性 窗口 , 然后 选择 Item 
项 , 单 击 其 后 的 [按钮 打开 “ItemList 编辑 器 ”窗口 ， 为 DropDownList 控件 添加 列表 项 。 
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(2) 在 HTML 源码 中 编写 代码 
将 页 面 切换 到 HTML 源码 中 ， 添 加 如 下 代码 ， 为 DropDownList 控件 添加 列表 项 ， 显 
示 站 内 搜索 类 别 。 具 体 代 码 如 下 : 


<asp:DropDownList ID="ddl Search" runat="server"> 
<asp:ListItem> 新 闻 信息 </asp:ListItem> 
<asp:ListItem> 产 品 信 息 </asp:ListItem> 
<asp:ListItem> 服 务 信 息 </asp:ListItem> 
</asp:DropDownList> 


7.1.2 ”执行 搜索 


当 用 户 输入 搜索 关键 字 后 ， 单 击 “ 搜 索 ” 按 钮 ， 将 会 触发 该 按钮 的 Click 事件 ， 在 该 
事件 下 调用 自 定义 方法 ， 检 索 数据 库 ， 并 将 搜索 到 的 信息 显示 在 搜索 结果 页 面 。 要 执行 搜 
索 条 件 ， 关 键 在 于 应 用 SQL 语句 中 的 Like 运算 符 进行 模糊 查询 。 下 面 对 Like 运算 符 进行 
介绍 。 

Like 运算 符 用 于 确定 给 定 的 字符 串 是 否 与 指定 模式 匹配 。 模 式 可 以 包含 常规 字符 和 通 
配 字符 ， 其 中 常规 字符 必须 与 字符 串 中 指定 的 字符 完全 匹配 ， 而 通 配 字符 只 需 与 字符 串 中 
的 部 分 匹配 即 可 。 例 如 ， 要 查询 Info 表 中 信息 名 称 含有 M 的 记录 ， 可 以 使 用 如 下 代码 。 

select * from Info where InfoName like "S%MS%" 

上 面 代码 中 的 % 为 通配符 。 

SQL 语句 中 的 通配符 如 表 7-2 所 示 。 


表 7-2 SQL 中 的 通配符 及 说 明 


通 配 符 
% 


说 明 

包含 0 个 或 更 多 字符 的 任意 字符 串 。 例 如 ，like%x%' 表 示 查 找 在 字符 串 的 任何 位 置 包含 x 的 值 
任何 单个 字符 。 例如 ，like'x_y' 表 示 查 找 以 x 开头 、y 结尾 的 值 ， 并 且 在 这 两 个 字符 之 间 有 
任意 一 个 字符 

属于 指定 范围 或 集合 中 的 任何 单个 字符 。 例 如 ，[af] 表 示 属 于 指定 范围 ([a-f]) 或 集合 
([abcdefl) 中 的 任何 单个 字符 

不 属于 指定 范围 或 集合 的 任何 单个 字符 。 例 如 ，[^af] 表 示 不 属于 指定 范围 ([a-f]) 或 集合 
([abcdefl) 中 的 任何 单个 字符 


7.1.3 ”展示 搜索 结果 


使 用 数据 控件 ， 如 DataList 控件 ， 可 以 很 容易 地 展示 来 自 后 端 数据 源 中 的 数据 。 

DataList 控件 可 以 显示 模板 定义 的 数据 绑 定 列表 ， 其 内 容 可 以 使 用 模板 进行 控制 。 通 
过 使 用 DataList 控件 ， 用 户 可 以 显示 、 选 择 和 编辑 多 种 不 同 数 据 源 中 的 数据 。DataList 控件 
的 最 大 特点 是 一 定 要 通过 模板 来 定义 数据 的 显示 格式 。 

DataList 控件 支持 的 模板 如 下 。 


【 尝 淮 车 沽 守 : 访 尝 点 问 吉 宾 涡 席 半 让 可 加 BN】 
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AlternatingItemTemplate: 如 果 已 定义 ， 则 为 DataList 中 的 交替 项 提供 内 容 和 布局 。 如 
果 未 定义 ， 则 使 用 ItemTemplate。 

EditItemTemplate: 如 果 已 定义 ， 则 为 DataList 中 当前 编辑 项 提供 内 容 和 布局 。 如 果 
未 定义 ， 则 使 用 ItemTemplate 。 

FooterTemplate: 如 果 已 定义 ， 则 为 DataList 的 脚注 部 分 提供 内 容 和 布局 。 如 果 未 定 
义 ， 则 不 显示 脚注 部 分 。 

HeaderTemplate: 如 果 已 定义 ， 则 为 DataList 的 页 眉 节 提供 内 容 和 布局 。 如 果 未 定义 ， 
则 不 显示 页 眉 节 。 

ItemTemplate: 为 DataList 中 的 项 提供 内 容 和 布局 所 要 求 的 模板 。 
SelectedItemTemplate: 如 果 已 定义 ， 则 为 DataList 中 当前 选 定 项 提供 内 容 和 布局 。 如 
果 未 定义 ， 则 使 用 ItemTemplate。 

SeparatorTemplate: 如 果 已 定义 , 则 为 DataList 中 各 项 之 间 的 分 隔 符 提供 内 容 和 布局 。 
如 果 未 定义 ， 则 不 显示 分 隔 符 。 


DataList 控件 常用 的 属性 、 方 法 和 事件 分 别 如 表 7-3、 表 7-4 和 表 7-5 所 示 。 


表 7-3 ”DataList 控件 的 常用 属性 及 说 明 


属 性 说 ”有明 
Attributes 获取 与 控件 的 属性 不 对 应 的 任意 特性 的 集合 
BindingContainer | 获取 包含 该 控件 的 数据 绑 定 的 控件 


获取 System.Web.UIL.ControlCollection 对 象 ， 它 包含 数据 列表 控件 中 的 子 控件 的 


Controls 

CssClass 获取 或 设置 由 Web 服务 器 控件 在 客户 端 呈现 的 级 联 样式 表 (CSS) 类 

DataKeyFile 获取 或 设置 由 DataSource 属性 指定 的 数据 源 中 的 键 字段 

DataKeys 获取 一 个 DataKey 对 象 集合 ， 这 些 对 象 表示 DataList 控件 中 的 每 一 行 的 数据 键 值 
当 数 据 源 包含 多 个 不 同 的 数据 项 列表 时 ， 获 取 或 设置 数据 绑 定 控件 绑 定 到 的 数据 

DataMember 
列表 的 名 称 

DataSource 获取 或 设置 对 象 ， 数 据 绑 定 控件 从 该 对 象 中 检索 其 数据 项 列表 

DataSourceID 获取 或 设置 控件 的 ID， 数据 绑 定 控件 从 该 控件 中 检索 其 数据 项 列表 

Enabled 获取 或 设置 一 个 值 ， 该 值 指示 是 否 启用 Web 服务 器 控件 

HorizontalAlign 获取 或 设置 DataList 控件 在 页 面 上 的 水 平 对 齐 方式 

ID 获取 或 设置 分 配给 服务 器 控件 的 编程 标识 符 

Page 获取 对 包含 服务 器 控件 的 page 实例 的 引用 


RepeatColumns 获取 或 设置 要 在 DataList 控件 中 显示 的 列 数 


SelectedIndex 获取 或 设置 DataList 控件 中 选 定 项 的 索引 


SelectedValue 获取 所 选择 的 数据 列表 项 的 键 字段 值 


ShowFooter 获取 或 设置 一 个 值 ， 该 值 指示 是 否 在 DataList 控件 中 显示 脚注 部 分 
ShowHeader 获取 或 设置 一 个 值 ， 该 值 指示 是 否 在 DataList 控件 中 显示 页 眉 节 


【党 码 营 操 字 :人 访 注 点 溃 玲 我 沿 讽 装 加入】 
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表 7-4 DataList 控件 的 常用 方法 及 说 明 


绑 定 。 


下 面 举例 说 明 如 何 通 过 设置 模板 为 DataList 控件 定义 数据 的 呈现 样式 ， 并 完成 数据 


方法 说 ” 明 
ApplyStyleSheetSkin 将 页 样式 表 中 定义 的 样式 属性 应 用 到 控件 
DataBind 将 数据 源 绑 定 到 DataList 控件 
Dispose 使 服务 器 控件 在 从 内 存 中 释放 之 前 执行 最 后 的 清理 操作 
FindControl 在 当前 的 命名 容器 中 搜索 指定 的 服务 器 控件 
Focus 为 控件 设置 输入 焦点 
GetType 获取 当前 实例 的 Type 
HasControls 确定 服务 器 控件 是 否 包含 任何 子 控件 
IsBindableType 确定 指定 的 数据 类 型 是 否 能 绑 定 到 DataList 控件 中 的 列 
RenderControl 输出 服务 器 控件 内 容 ， 并 存储 有 关 此 控件 的 跟踪 信息 
定 ResolveUrl 将 URL 转换 为 在 请 求 客户 端 可 用 的 URL 
表 7-5 “DataList 控件 的 常用 事件 及 说 明 
> 事件 说 有明 
神 CancelCommand 对 DataList 控件 中 的 某 个 项 ， 单 击 Cancel 按钮 时 发 生 
DeleteCommand 对 DataList 控件 中 的 某 个 项 ， 单 击 Delete 按钮 时 发 生 
系 EditCommand 对 DataList 控件 中 的 某 个 项 ， 单 击 Edit 按钮 时 发 生 
规 ItemCommand 当 单 击 DataList 控件 中 的 任 一 按钮 时 发 生 
二 ItemCreated 当 在 DataList 控件 中 创建 项 时 ， 在 服务 器 上 发 生 
村 ItemDataBound 当 项 被 数据 绑 定 到 DataList 控件 时 发 生 
入 UpdateCommand 对 DataList 控件 中 的 某 个 项 ， 单 击 Update 按钮 时 发 生 
算 
机 
系 
2 


示例 ，DataList 控件 的 数据 绑 定 。 


(1) 新 建 一 个 名 为 DataListBingding.aspx 的 页 面 ， 在 页 面 上 添加 一 个 DataList 控件 。 
(2) 编辑 DataList 控件 ， 并 设置 项 模板 ， 进 行 显示 字段 映射 。 
在 Visual Studio 环境 中 单 击 DataList 控件 快捷 任务 面板 右上 角 的 由 标记 ， 打 开 “DataList 
任务 ”快捷 菜单 ， 如 图 7-4 所 示 。 


asp:datalistzDatalListi| 


DataList - Datalistl 


右 去 或 渤 择 “ 编 各 模 板 
壬 要 使 用 HtemTemplate。 


”任务 来 编 名 模 板 内 容 。 


图 


7-4 打开 DataList 的 模板 编辑 器 


选择 “编辑 模板 ”命令 ， 将 进入 模板 编辑 界面 ， 如 图 7-5 所 示 。 
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在 本 例 中 由 于 只 用 实现 DataList 控件 的 数据 绑 定 ， 所 以 这 里 只 简单 地 定义 一 个 
ItemTemplate 即 可 。 单 击 选择 模板 类 型 后 ， 编 辑 ItemTemplate 模板 样式 ， 并 添加 3 个 Label 
控件 , 用 于 显示 数据 源 中 的 数据 记录 。Label 控件 的 ID 属性 分 别 为 : stu_no( 学 号 ) stu_name 


项 目 7 站 内 搜索 模块 设计 如 


(姓名 ) 、stu_score (分数) ， 如 图 7-6 所 示 。 


asp:datalist#Datalist!| 


Datalistl - 项 模板 
[HtemTemplate 
? | sr [EEC 
ltemTemplate fe 
AkernatingltemTemplate | DataList1 - 项 模板 
SelectedltemTemplate i | 
EditltemTemplate emeete 
页 站 和 页 朋 模 板 学 号 ; Label 
HeaderTemplate 村 多 : Label 
FooterTemplate 分 数 ，Label 
分 陋 符 模板 一 一 一 一 
图 7-5 模板 编辑 界面 图 7-6 


单 击 ID 属性 为 stu_no 的 Label 控件 右上 角 的 四 标记， 打开 “Label 任务 ”快捷 菜单 ， 
选择 “编辑 DataBindings” 命 令 ， 打 开 stu_no DataBindings 对 话 框 。 在 Text 属性 的 “代码 


设计 项 模板 


表达 式 ” 文 本 框 中 输入 Eval("no")， 用 于 绑 定 数据 源 中 的 no 字段 ， 如 图 7-7 所 示 。 


stu_no DataBindings 


[9 lm 


运 掺 要 六 定 和 属性 ,然后 可 通过 法 返 李 各 来 媚 定 它 ， 也 可 合用 记 定 义 代码 束 达 式 志 定 它 ， 


其 中 ，Eval 方法 用 于 读 取 数 据 绑 定 后 当前 显示 项 所 呈现 的 数据 项 〈 某 条 记录 ) 的 相应 


加 显示 所 有 是 性 (A) 


图 7-7 stu_no DataBindings 对 话 框 


字段 数据 ，Eval 方法 的 参数 XXX 用 于 指定 记录 中 要 显示 的 字段 名 。 


使 用 同样 的 方法 确定 stu_name 和 stu_score 的 Label 控件 , 然后 结束 模板 编辑 , 如 图 7-8 


所 示 。 


RemTemplate | 
学 号 ，[stu_no] 

远 名 ; [3tunane] 

分数 [stu_sceore] 


s+ EE 
结 主 樟 板 综 竹 


图 7-8 结束 模板 编辑 


【 尝 奏 车 灌 村 .六 济 点 问 给 我 山 席 半 加 
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【 尝 滁 六 洪福 ， 仿 冰 是 六 玲 全 矶 席 淮 兴 丰 员 丰 】 
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定义 模板 后 的 页 面 代码 如 下 : 


<asp:DataList ID="DataList1"” runat="server" CellSpacing="5" RepeatColumns="1"> 


<ItemTemplate> 
学 号 : <asp:Label ID="stu no" runat="server" Text="'<$%# Eval ("no") $>'></asp:Label> 
<br /> 
姓名 : <asp:Label ID="stu name" runat="server" Text='<%# Eval ("name") %>'></asp:Label> 
<br /> 
分 数 : <asp:Label ID="stu score" runat="server" Text='<%# Eval ("score") $>'></asp:Label> 
</ItemTemplate> 
</asp:DataList> 
(3) 设置 DataList 的 布局 属性 ， 采 用 Table 布局 ， 每 行 显示 一 项 ， 如 图 7-9 所 示 。 
属性 -Ox 
DataListl System.Web.ULWel ~ 
和 放下 电 局 号 
Cellpadding = -1 ^ 


Cellspacing 5 
ExtractTemplat, False 
Height 

HorizontalAlign NotSet 
RepeatColumn' 
RepeatDirectio! Vertical 
RepeatLayout Table 
Width 


ClienttDMode Inherit 
Enabled True 


RepeatColumns 
要 用 于 该 布局 的 列 的 数目 . 


图 7-9 设置 DataList 布局 属性 


(4) 在 页 面 后 台 类 中 添加 数据 绑 定 方法 listbind()， 并 在 页 面 的 Page_Load 事件 里 调用 
方法 ， 代 码 如 下 。 
Protected void Page Load(object sender, EventArgs e) 
{ 
if (!Page.IsPostBack) 
listbind(); 
} 
void listbind() 
// 实 例 化 SqlConnection 对 象 
SqlConnection con = new SqlConnection("server=.;database=WebShopDB;uid=sa;pwd="); 
con.Open (); 
// 实 例 化 SqlDataaAdapter 对 象 
SqlDataAdapter sda = new SqlDataAdapter("select * from stu",con); 
// 实 例 化 数据 集 DataSet 
DataSet ds = new DataSet (); 
sda.Fill(ds, "stu"); 
// 绑 定 DataList 控 件 
DataList1.DataSource = ds.Tables["stu"] .DefaultView; 
DataListl1.DataBind(); 
) 


运行 实例 ， 效 果 如 图 7-10 所 示 。 
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图 7-10 ”DataList 控件 绑 定 数据 源 
任务 实施 


本 任务 以 新 闻 信 息 搜 索 为 例 ， 实 现 网 站 首页 的 站 内 搜索 功能 。 主 要 用 到 了 数据 表 信 息 
的 检索 、 分 页 功能 以 及 DataList 控件 。 
步骤 1: 用 SQL Server 创建 数据 库 、 数 据 表 、 存 储 过 程 。 
(1) 创建 数据 库 WebShopDB， 使 用 SQL 语句 创建 新 闻 表 news， 详 细 代 码 参 考 项 目 
3， 这 里 不 再 次 述 。 
(2) 编写 存储 过 程 。 本 任务 用 到 了 两 个 存储 过 程 : getdatacountbycondition 和 sp_get- 
datebyPageIndex。 
存储 过 程 getdatacountbycondition 的 代码 如 下 : 


USE [WebShopDB] 

GO 

/****** Object: StoredProcedure [dbo] . [getdatacountbycondition] Script Date: 
08/27/2014 13:34:02 ww*ww**/ 

SET ANSI_ NULLS ON 


GO 
SET QUOTED IDENTIFIER ON 
GO 
-- Author: zhousa 


-- Description: ”查询 


ALTER PROCEDURE [dbo].[getdatacountbycondition] 
-- Add the parameters for the stored procedure here 
@tablename nvarchar(100), 
@condition nvarchar (200) 


【 尝 给 这 操 守候 尝 点 溃 布 臣 山 讽 妆 加 加 3】 


RS 
BEGIN 
DECLARE @sql nvarchar (1000) 
SET @sql="'SELECT count(*) FROM '+ @tablename +' WHERE 1=1 '+ @condition 
EXEC (@sql) 
END 


上 述 代 码 中 ，USE [WebShopDB] 表 明 操 作 针 对 WebShopDB 数据 库 ， 该 存储 过 程 用 于 
查询 WebShopDB 数据 库 中 表 的 内 容 ， 有 两 个 参数 : tablename 和 condition。 
党 ”tablename: 要 查询 的 表 或 视图 名 称 。 
党 ”condition: 查询 条 件 。 
在 执行 存储 过 程 时 ， 需 明确 这 两 个 声明 参数 的 值 。 
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存储 过 程 sp_getdatebyPageIndex 的 代码 如 下 : 

USE [WebShopDB] 

GO 

/****** Object: StoredProcedure [dbo].[sp getdatebyPageIndex] Script Date: 
D0825/2014 23:L1:43 二 去 大志 三 二 人 

SET ANSI NULLS ON 


GO 
SET QUOTED IDENTIFIER ON 
GO 
-- Autho: Zhousa 


-- Create date: 2014 年 月 日 :20:01 
-- Description: 分 页 
ALTER PROCEDURE [dbo].[sp _ getdatebyPageIndex] 
-- Rdd the parameters for the stored procedure here 
Q@pageindex int=0, 
Q@pagesize int=10, 
@table nvarchar (100), 
@columns nvarchar (500), 
@condition nvarchar (300), -- and ,or 
@pk nvarchar (100) 


AS 

BEGIN 
DECLARE @sql nvarchar (1000) 
SET @sql=' select top '+cast (@pagesize AS nvarchar (10))+''+@columns + ' from '+@table+ 
' where '+@pk+' not in (select top '+ cast (@pageindex*@pagesize RS nvarchar (10) )+ 
' "+ @pk +' from '+ etable+' where 1=1 '+@condition+')' +@condition 

-- PRINT @sql 
EXEC (@sql) 


END 
同样 ， 该 存储 过 程 的 操作 也 是 针对 WebShopDB 数据 库 ， 用 于 实现 查询 结果 的 分 页 功 
能 。 包 含 6 个 参数 ， 其 中 ，pageindex 表示 页 码 ， 参 数 pagesize 表示 页 数 ， 参 数 table 表示 
表 名 ， 参 数 columns 表示 列 数 ， 参 数 condition 表示 条 件 ， 参 数 pk 表示 主键 。 在 执行 存储 
过 程 时 ， 也 需 明 确 这 6 个 声明 参数 的 值 。 
(3) 加 入 测试 数据 ， 如 图 7-11 所 示 。 


id tped tite newscontent Picure laz jpindate Changedate mgur mgtext imgl., imgAlt 


1 1 年 中 大 会 123jpg 123 ”20140101000.。 20140102000..，。 \adimn\fieimg\..， 大 会 现场 图 片 
2 1 新 产品 上 市 20140101000.， 20140102000.。 \admn\fleing\... 
3 1 新 产品 上 市 20140101000.。 20140102000.。 \admn\fleimg\... 
4 1 新 产品 上 市 20140101000.。 20140102000.。 \adimn\fleimg\... 
$s | 年 中 促销 20140101000.， 20140102000.。 \admn\fleimg\... 
6 1 年 中 促销 20140101000.， 20140102000.。 \admn\fleimg\... 
7 | 年 中 促销 20140101000.， 20140102000.， \admn\fleimg\... 
1 产品 研发 20140101000.… \admn\fleimg\... 
1 新 产品 上 市 20140101000. \adimn\fleimg\... 
0 1 新 产品 上 市 201401010020.… \admn\fleimg\... 
1 1 新 产品 上 市 ” 时尚 丝 巾 上 市 2014010100;0..。 20140102000.。 \admn\fleimg\... 


图 7-11 添加 新 闻 数 据 
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步骤 2: 编写 DAL、BLL 相关 数据 库 操作 类 。 

BLL 是 业务 逻辑 层 ，DAL 是 数据 访问 层 ， 业 务 逻 辑 层 在 数据 访问 层 之 上 ， 也 就 是 说 ， 
BLL 调用 DAL 的 类 和 对 象 ，DAL 访问 数据 并 将 其 传 给 BLL。 

(1) 编写 DAL 类 ， 参 考 代 码 如 下 : 


using System; 
using System.Collections.Generic; 
using System.Web; 
using System.Data; 
using System.Data.SqlClient; 
public class SqlDataHelper 
Public static string ConnString 
{ 
get 
{ 
return System.Configuration.ConfigurationManager.ConnectionStrings 


["WebDBConnectionString"] .ToString() ; // 从 配置 文件 中 获取 数据 库 连 接 字 符 串 


} 
public static DataTable SelectSqlReturnDataTable(string sql, CommandType type, 
SqlParameter[] pars) 
! 
SqlConnection conn = new SqlConnection (ConnString) ; / /实例 化 数据 库 和 连接 对 象 
SqlDataAdapter sda = new SqlDataAdapter(sql, conn); / /实例 化 数据 适配器 对 象 
if (pars != null && pars.Length > 0) /1 车 参数 不 为 空 并 且 长 度 大 于 零 
{ 
foreach (SqlParameter p in pars) 
{ 
sda.SelectCommand.Parameters.Add(p);  ”// 在 数据 源 中 选择 数据 
} 


} 
sda.SelectCommand.CommandType = type; 
DataTable dt = new DataTable(); 
sda.Fill(dt); // 将 读 取 的 数据 行 填充 至 DataTable 对 象 
return dt; 
} 
Public static object SelectSqlReturnObject(string sql, CommandType type, 
SqlParameter[] pars) 
| 
SqlConnection conn = new SqlConnection (ConnString) ;  // 实 例 化 数据 库 连 接 对 象 
if (conn .State == ConnectionState.Closed || conn.State == ConnectionState.Broken) 
{ 


【党 码 营 操 字 : 仿 洋 点 冲 共 我 沿 痪 半圆】 


conn.Oopen(); // 打 开 数 据 库 连接 


try 
{ 
// 声 明 并 实例 化 SqlCommand 对 象 
SqlCommand cmd = new SqlCommand(sql, conn); 
cmd.CommandType = type; // 设 置 SqlCommand 对 象 要 执行 命令 的 类 型 
if (pars != null && pars.Length > 0) // 若 参数 不 为 空 并 且 长 度 大 于 零 
foreach (SqlParameter P in pars) 
cmd.Parameters.Add (p); 
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} 
object obj = cmd.ExecuteScalar (); // 执 行 查询 


return obj; 
外 
catch (Exception ex) 
{ 
return null; 
} 
finally 
{ 
conn.Close(); // 关 闭 数据 库 连接 
} 


(2) 编写 BLL 类 ， 其 中 声明 两 个 方法 : getdatacountbycondition 和 getpageindex。 

党 ”getdatacountbycondition 方法 : 用 于 执行 查询 ， 返 回 整 数 〈 即 查询 到 的 记录 数 ) 。 有 
两 个 参数 ， 分 别 是 tablename 要 查询 的 表 或 视图 名 称 ) 和 condition (查询 条 件 ) 。 

学 getpageindex 方法 : 用 于 执行 查询 ， 返 回 数据 表 对 象 DataTable 。 有 6 个 参数 ， 其 中 ， 
pageindex 表示 页 码 ，pagesize 表示 页 数 ，tablename 表示 要 查询 的 表 或 视图 名 称 ， 
columns 表示 要 查询 的 列 ，condition 表示 条 件 ，pk 表示 主键 。 

参考 代码 如 下 : 

using System; 

using System.Collections.Generic; 

using System.Web; 

using System.Data; 

using System.Data.SqlClient; 


public class CommTool 
{ 


public int getdatacountbycondition(string tablename, string condition) 
{ 
SqlParameter[] pars = new SqlParameter[]{ 
new SqlParameter ("@tablename",tablename), 
new SqlParameter ("@condition",condition) 
Py 
return int.Parse (SqlDataHelper.SelectSqlReturnObject 
("getdatacountbycondition", CommandType.StoredProcedure, ars).ToString()); 


【 尝 淮 营 沽 守 : 访 演 点 问 吉 我 沁 席 半 外 可 加 3】 


public DataTable getpageindex (int pageindex, int pagesize, string tablename, 

string columns, 

string conditions, string pk) 

{ 
SqlParameter[] pars = new SqlParameter[]{ 
new SqlParameter ("@pageindex",pageindex), 
new SqlParameter ("@pagesize",pagesize), 
new SqlParameter ("@table", tablename), 
new SqlParameter ("@columns",columns), 
new SqlParameter ("@condition",conditions), 
new SqlParameter ("@pk",pk) 
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}; 
return SqlDataHelper.SelectSqlReturnDataTable ("sp _ getdatebyPageIndex", 
CommandType.StoredProcedure, pars); 
} 
} 


步骤 3: 打开 项 目 中 的 index.aspx 文件 ， 使 用 DIV+CSS 设计 搜索 前 台 代 码 。 
(1) 首先 设计 页 面 布局 ， 参 考 代 码 如 下 : 
<div class="box2"> 
<h3> 站 内 搜索 </h3> 
<div> 
<asp:DropDownList ID="ddl Search" runat="server"> 
<asp:ListItem> 新 闻 信 息 </asp:ListItem> 


7 ee :DropDownList> 

<div> 
<asp:TextBox ID="txtSearch" runat="server" Width="129px"> 
</asp:TextBox> 
<asp:Button ID="BtnSearch" runat="server" OnClick="BtnSearch Click" Text= 
"搜索 ” /> 

</div> 

</div> 

</div> 

这 段 代 码 使 用 了 3 个 div 层 容 器 进行 控制 。 第 一 行使 用 了 一 个 顶层 div 层 容器 , 在 这 个 
层 中 嵌 套 了 一 个 独立 的 div 层 , 包括 搜索 类 别 下 拉 列 表 。 中 间 的 div 层 又 嵌 套 了 一 个 独立 的 
div 层 容 器 ， 包 括 搜索 关键 字 文 本 框 和 搜索 按钮 。 

(2) 接 下 来 ， 应 用 CSS 样式 设置 页 面 格式 ， 如 宽度 、 高 度 、 边 距 、 缩 进 等 ， 具 体 代 
码 如 下 : 

.box2{ margin-bottom:20px; } 

‘box2 h3{ background:url (Images/box2title.gif); width:196px; height:25px; 

line-height:25px; text-indent:30px; color:#fff; margin-top:10px} 

其 中 ，margin 属性 用 于 控制 元 素 边界 与 网 页 文件 其 他 内 容 的 空白 距离 ，4 个 边界 分 为 
margin-top (上 ) 、margin-right ( 右 ) 、margin-bottom (下 ) 和 margin-left ( 左 ) 。Background 
属性 用 于 设置 背景 图 片 , 包括 图 片 路 径 和 图 片 文件 名 。width 属性 用 于 设置 元 素 宽度 , height 
属性 用 于 设置 元 素 高 度 ，line-height 用 于 设置 行 高 ，text-indent 用 于 设置 首 行 缩 进 ，color 
用 于 设置 颜色 。 

步骤 4: 编写 后 台 功 能 代码 。 

(1) 当 用 户 选 择 某 一 搜索 类 别 ， 输 入 一 个 搜索 关键 字 后 ， 单 击 “ 站 内 搜索 ”按钮 ， 将 
会 触发 该 按钮 的 Click 事件 ， 在 该 事件 下 调用 自 定义 方法 BtnSearch_Click， 将 搜索 到 信息 
显示 在 结果 页 面 。 

BtnSearch_Click 方法 的 代码 如 下 : 


protected void BtnSearch Click(object sender, EventArgs e) 
| 


【党 维 这 沽 守 . 访 漳 点 茵 给 匠 沿 讽 半 加 可 加 3】 


string searchtype = this.ddl Search.SelectedItem.Text; // 取 得 搜索 类 别 
string condition = this.txtSearch.Text; // 取 得 搜索 关键 字 
Btring Com = WH 

if (searchtype == "产品 信息 ") // 如 果 搜索 产品 信息 
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con = "and productName like '%" + condition + "要 "7 
Response.Redirect ("Prolist .aspx?condition=" + con) ; // 将 网 页 重新 导向 Prolist.aspx 
} 


if (searchtype == "服务 信息 ") // 如 果 搜索 服务 信息 
. 

con = " and title like '%" + condition + "%" "7 

Response.Redirect ("ServerList.aspx?condition=" + con); 
} 


if (searchtype == "新 闻 信息 ") / /如 果 搜索 新 闻 信 息 
{ 
Response.Redirect 
con = " and title like '%" + condition + "$%" 
Response.Redirect ("NewsList.aspx?condition=" + con); 


如 ， 用 户 选 择 “ 新 闻 信息 ”类 别 ， 输 入 检索 关键 字 “ 新 产品 ”， 单 击 “ 站 内 搜索 ” 
则 搜索 结果 显示 如 图 7-12 所 示 。 


广州 市 花 者 哈 这 斯 皮具 有 限 公司 


新 闻 中 必 六 务 与 联系 我 们 


首页 》 新 闻 列表 
新 闻 中 心 
产品 研发 取得 新 突破 (2014-06-11) 
新 产品 上 市 预告 (2014-09-21) 
版权 所 有 : 哈 亿 斯 皮 且 有 限 公司 
技术 支持 : 信息 部 联系 电话 696369 
图 7-12 搜索 结果 页 面 效 果 

(2) 搜索 结果 页 面 NewsList.aspx 主要 使 用 DataList 控件 展示 检索 到 的 数据 ， 参 考 代 


码 如 下 : 


<div id="middle" style="font-size: large; font-weight: bolder; background-color: #FF9933;"> 


<div id="navTip" style="font-size: large; font-weight: bolder; width: 959px;"> 
<a href="Index. aspx"> 首 页 》</a> 新 闻 列 表 </div> 


<div id="middlecontent"> 
<div id="Title" style="font-family: 宋体 , Arial, Helvetica, sans-serif; font-size: 


32px; font-weight: bolder; color: #993333; vertical-align: middle; text-align: 
center;"> 新 闻 中 心 </div> 
<div> 


<div class="middlecontentList"> 
<ul> 
<asp:DataList ID="DataList1l" Width="100%" runat="server" Height="16px"> 
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<ItemTemplate> 
<1i><a href="NewsDetail .aspx?newsid=<%#Eval ("ID") %>"><%#Eval ("title")%®%> 
</a> <span> (<%#Eval ("joindate")®%>)</span></1i> 
</ItemTemplate> 
</asp:DataList> 
</ul> 
</div> 
</div> 
</div> 
</div> 


步骤 5: 当 搜 索 结果 过 多 时 ， 实 现 分 页 显示 。 

分 页 是 Web 应 用 程序 最 常用 到 的 功能 之 一 ， 手 工 编写 分 页 代码 不 但 技术 难度 大 、 任 务 
繁琐 而 且 代码 重用 率 极 低 。 这 一 步骤 中 使 用 AspNetPager 分 页 控件 来 解决 分 页 问题 ， 将 使 
繁琐 的 分 页 工作 变 得 简单 化 .AspNetPager 控件 将 分 页 导航 功能 与 数据 显示 功能 完全 独立 开 
来 ， 由 用 户 自 己 控 制 数 据 的 获取 及 显示 方式 ， 因 此 可 以 被 灵活 地 应 用 于 任何 需要 实现 分 页 
导航 功能 的 地 方 ， 如 为 DataList 数据 绑 定 控件 实现 分 页 。 

(1) 在 NewsList.aspx 页 面 添加 分 页 控件 AspNetPager， 代 码 如 下 : 
ee ID="AspNetPager]1l" runat="server" CssClass="paginator" 
CurrentPageButtonClass="cpb" onpagechanged="AspNetPager]l PageChanged"> 


</webdiyer:AspNetPager> 
</div> 


其 中 ，onpagechanged 代表 分 页 发 生 改 变 时 触发 事件 。CurrentPageButtonClass 是 
AspNetPager 分 页 控件 当前 页 导航 按钮 的 级 联 样式 表 (CSS) 类 。 
(2) 实现 搜索 结果 分 页 显示 【每 页 显示 $ 条 记录 ) 的 后 台 代 码 如 下 : 
using System; 
using System.Collections.Generic; 
using System.Web; 


using System.Web.UI; 
using System.Web.UI.WebControls; 


public partial class Default : System.Web.UI.Page 
1 
private static int pagesize = 5; // 每 页 显示 5 条 记录 
private static int pageindex = 0; // 页 码 
Private static string condition = ""; 
SqlDataHelper tSDH = new SqlDataHelper(); // 实 例 化 SqlDataHelper 对 象 
CommTool commtool = new CommTool (); // 实 例 化 commTool 对 象 


protected void Page Load(object sender，EventRrgs e) // 页 面 加 载 

; if (Request ["condition"] != null && Request["condition"] .ToString() .Length > 0) 
condition = Request["condition"] .ToString() 7 
人 () 7 

es void getNewsListByPageIndex() 

{ 


【党 码 营 操守: 仿 注 点 冲 玲 我 沿 讽 半 澡 区】 
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| 


// 记 录 总 数 

this.AspNetPager] .RecordCount = commtool .getdatacountbycondition ("news", condition); 
this.AspNetPagerl] .PageSize=pagesize; 

// 设 置 DataSource， 数 据 绑 定 控件 从 中 检索 数据 
this.DataList1.DataSource=commtool.getpageindex (pageindex, pagesize, "news", " Id 
title,convert (nvarchar (10) ,joindate, 121) as joindate", condition + " order by id 
desc", "id"); 

this.DataList1.DataBind(); // 将 数据 源 绑 定 到 DataList 控 件 


protected void AspNetPagerl PageChanged(object sender，EventRrgs e) // 页 索引 改变 方法 
pageindex = this.AspNetPagerl.CurrentPageIndex - 1; // 当 前 页 减 1 
getNewsListByPageIndex(); 


项 目 总 结 


站 内 搜索 以 新 闻 信 息 搜索 为 例 ， 首 先 通过 SQL Server 创建 数据 库 和 表 ， 并 添加 新 闻 数 
据 ， 编写 站 内 搜索 的 存储 过 程 ， 其 次 用 C# 编 写 数据 库 检 索 操 作 类 ， 最 后 建立 ASP 搜索 入 
口 页 面 和 搜索 结果 页 面 ， 并 完善 相关 后 台 功 能 的 代码 。 


拓展 训练 


上 mi 一 


. 站 内 搜索 入 口 的 设计 原则 有 哪些 ? 

. 说 明 TextBox、Button、DropDownList 和 AspNetPager 控件 的 用 途 。 
. 如 何 为 DropDownList 控件 添加 列表 项 ? 

. 展示 搜索 结果 可 以 应 用 哪些 数据 控件 ? 

. 参考 新 闻 信 息 搜索 过 程 ， 实 现 产品 信息 搜索 功能 。 
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